HTML Form Validation

Modern HTML provides built-in, native form validation through attributes on input elements, letting browsers catch many common input errors before any JavaScript or server-side code runs. This is not a replacement for server-side validation — client-side checks can always be bypassed — but it provides fast, accessible feedback for legitimate users.

Why it matters

Catching a mistake before the form is sent saves the user a round trip and a re-typed form. HTML can require a field, limit its length and check its format with attributes alone. It is equally important to know the limit of this: anyone can bypass the browser, so the server must check everything again.

Core Validation Attributes

A handful of attributes cover most everyday validation needs without writing a single line of JavaScript.

• required — the field must have a value before the form can be submitted.
• pattern — the value must match a given regular expression (e.g. pattern="[0-9]{5}" for a 5-digit ZIP code).
• min / max — set the minimum and maximum allowed values for number, date, and range inputs.
• minlength / maxlength — constrain the number of characters allowed in text-based fields.

How the Browser Surfaces Errors

When a form is submitted with invalid fields, the browser blocks submission, focuses the first invalid field, and shows a small built-in tooltip describing the problem (e.g. "Please fill out this field"). Invalid fields also automatically match the CSS :invalid pseudo-class, which developers commonly use to add a red border or warning icon without any JavaScript.

Native Validation Is Not Enough Alone

Because all client-side validation, including HTML's built-in attributes, can be bypassed by disabling JavaScript, editing HTML through developer tools, or sending requests directly to the server, every value must also be validated and sanitized again on the server before it's trusted or stored. Native HTML validation exists to improve user experience with instant feedback, not to serve as a security boundary.

Example

<label for="zip">ZIP Code</label>
<input
  type="text"
  id="zip"
  name="zip"
  required
  pattern="[0-9]{5}"
  maxlength="5"
  title="Enter a 5-digit ZIP code">

<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" required>

If the form is submitted with the ZIP field empty or not matching exactly 5 digits, the browser blocks submission and shows a validation message near that field; the quantity field similarly rejects values below 1 or above 10.

Exercise

Add validation with attributes only. The username is required, between 3 and 15 characters, and may contain only lower-case letters and digits. The email is required. The quantity must be between 1 and 10.

Expected result: pressing Submit with an empty or invalid field shows the browser's own error message and does not submit.

<form>
  <p>
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
  </p>
  <p>
    <label for="quantity">Quantity</label>
    <input type="number" id="quantity" name="quantity">
  </p>
  <button type="submit">Submit</button>
</form>

<form>
  <p>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required minlength="3" maxlength="15"
           pattern="[a-z0-9]+" title="Lower-case letters and digits only">
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="quantity">Quantity</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10">
  </p>
  <button type="submit">Submit</button>
</form>

Quick quiz

Interview questions