Form validation

What you'll learn

How to make the browser check input for you using required, minlength, min, max and pattern.

Why it matters

Catching a mistake before the form is sent saves time and frustration. Built-in validation works without any JavaScript, and it is accessible by default.

Explanation

Validation means checking that the input is acceptable. HTML has attributes for the common checks:

• required: the field cannot be empty.
• type="email" and type="url": the value must look like an email or web address.
• minlength and maxlength: limits on text length.
• min and max: limits on numbers and dates.
• pattern: a regular expression the text must match, such as [0-9]{6} for exactly six digits.
• title: the message hint shown when the pattern fails.

When the user presses submit and something is invalid, the browser stops, focuses the first bad field and shows a message.

Example

Step-by-step walkthrough

1. The username is required and must be 3 to 10 characters.
2. The age field is a number between 18 and 99. The browser blocks 17 or 100.
3. The pattern="[0-9]{4}" means exactly four digits. title is the explanation shown to the user.
4. Press Join with empty or wrong fields in the preview: the browser shows a message and stops the submit.

Try it yourself

Add a required email field with type="email", and try submitting hello to see the error.

Validate a formHTML / CSS

Editable code<form> <p> <label for="user">Username (3 to 10 characters)</label><br> <input id="user" name="user" required minlength="3" maxlength="10"> </p> <p> <label for="age">Age (18 to 99)</label><br> <input id="age" name="age" type="number" min="18" max="99" required> </p> <button type="submit">Join</button> </form>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Relying on the browser only. Validate on the server too.
• A pattern with no title, so the user does not know what is expected.
• Using maxlength on number fields. Use min and max for numbers.
• Forgetting required and then wondering why empty values are accepted.

Quick quiz

Summary

• required, min, max, minlength, pattern and input types validate for free.
• Add a title to explain a pattern.
• Always validate again on the server.

Next: tags that give structure meaning.

<form>
  <p>
    <label for="user">Username (3 to 10 characters)</label><br>
    <input id="user" name="user" required minlength="3" maxlength="10">
  </p>
  <p>
    <label for="age">Age (18 to 99)</label><br>
    <input id="age" name="age" type="number" min="18" max="99" required>
  </p>
  <p>
    <label for="pin">PIN (exactly 4 digits)</label><br>
    <input id="pin" name="pin" pattern="[0-9]{4}" title="Four digits" required>
  </p>
  <button type="submit">Join</button>
</form>