Form Validation

Browsers can check form input before it's sent — required fields, email formats, number ranges, lengths and custom patterns — and show messages without a single line of JavaScript. This lesson covers HTML's validation attributes and how to style valid and invalid fields.

required

Press Submit with the fields empty: the browser blocks submission, focuses the first problem and shows a message. required works on text inputs, checkboxes, radio groups, selects and textareas.

Type-based validation

Try "hello" in the email field: type="email" and type="url" check the basic format automatically.

Ranges and lengths

<form action="https://httpbin.org/get">
  <p><label for="v-age">Age (18–120)</label> <input id="v-age" name="age" type="number" min="18" max="120"></p>
  <p><label for="v-qty">Quantity (multiples of 6)</label> <input id="v-qty" name="qty" type="number" step="6" min="0"></p>
  <p><label for="v-user">Username (3–15 characters)</label> <input id="v-user" name="username" minlength="3" maxlength="15"></p>
  <p><label for="v-date">Date (this year)</label> <input id="v-date" name="date" type="date" min="2026-01-01" max="2026-12-31"></p>
  <button type="submit">Check</button>
</form>

Result

Attribute	Applies to	Checks
`required`	Most controls	Not empty
`min`, `max`	number, range, date, time	Within range
`step`	number, range, date, time	Allowed increments
`minlength`, `maxlength`	Text inputs, textarea	Number of characters
`pattern`	Text inputs	Matches a regular expression
`type`	email, url	Format

pattern

<form action="https://httpbin.org/get">
  <p>
    <label for="v-pc">Postcode (format 1234-567)</label>
    <input id="v-pc" name="postcode" pattern="\d{4}-\d{3}" title="Four digits, a hyphen, then three digits" placeholder="1100-148">
  </p>
  <p>
    <label for="v-code">Product code</label>
    <input id="v-code" name="code" pattern="[A-Z]{3}-[0-9]{2}" title="Three capital letters, a hyphen and two digits, e.g. ABC-12">
  </p>
  <button type="submit">Check</button>
</form>

Result

pattern takes a regular expression that must match the whole value. The title text is added to the error message, so describe the expected format in plain words.

Styling valid and invalid fields

CSS pseudo-classes reflect validity. :user-invalid and :user-valid only apply once the user has interacted with the field, so a fresh form isn't covered in red before anyone has typed — unlike the older :invalid, which matches immediately.

Turning built-in validation off

Add novalidate to the form to stop the browser blocking submission — for example, when JavaScript will show custom, inline error messages instead. The validation attributes still work as data for scripts through the Constraint Validation API (checkValidity(), validity, setCustomValidity()), covered in the JavaScript forms lesson.

Client-side validation isn't security

Important: anyone can edit your HTML in developer tools, turn off JavaScript, or send data straight to your server. Browser validation exists to help honest users fix mistakes quickly. The server must always validate every value again before using it.

Good validation UX

Tell people the rules up front ("8+ characters") instead of only after they fail.
Be forgiving: accept spaces in card numbers, either case in codes, and so on — clean the data up on the server.
Don't over-validate names and addresses; real-world names have apostrophes, hyphens, spaces and characters from every alphabet.
Make error messages specific and polite: "Enter a date in 2026", not "Invalid input".

Try it yourself

<style>
  input:user-invalid { border: 2px solid #c01c28; }
  input:user-valid { border: 2px solid #2ec27e; }
</style>
<form action="https://httpbin.org/get">
  <h3>Create an account</h3>
  <p><label for="ca-user">Username</label><br><input id="ca-user" name="username" required minlength="3" pattern="[a-z0-9_]+" title="Lowercase letters, digits and underscores"></p>
  <p><label for="ca-email">Email</label><br><input id="ca-email" name="email" type="email" required></p>
  <p><label for="ca-pw">Password</label><br><input id="ca-pw" name="password" type="password" required minlength="10" autocomplete="new-password"></p>
  <p><label for="ca-age">Age</label><br><input id="ca-age" name="age" type="number" min="13" max="120"></p>
  <button type="submit">Sign up</button>
</form>

Result

PreviousButtons NextSending Form Data