Built-in form validation

Why validate?

Validation means checking that an answer makes sense before using it: the mobile number has 10 digits, the age is a number, the email has an @. Checking in the browser gives the user instant help, without waiting for the server.

The validation attributes

A regular expression (regex) is a short pattern that describes text. [0-9] means one digit and {6} means exactly six of them, so [0-9]{6} matches a 6-digit PIN code. The pattern must match the whole value.

<label for="mobile">Mobile number (10 digits)</label>
<input id="mobile" name="mobile" type="tel" required
       pattern="[6-9][0-9]{9}" inputmode="numeric" autocomplete="tel">

<label for="pin">PIN code</label>
<input id="pin" name="pin" required pattern="[0-9]{6}"
       inputmode="numeric" autocomplete="postal-code">

<label for="age">Age</label>
<input id="age" name="age" type="number" min="18" max="60">

Help the phone help the user

• inputmode="numeric" shows a number keyboard even for a text field.
• autocomplete="name", "email", "tel", "postal-code" lets the phone fill saved details in one tap.
• Write the rule next to the label ("10 digits"), not only in the error.

Checking from JavaScript

Every input has a validity object and a checkValidity() method. validity.valueMissing is true when a required field is empty; validity.patternMismatch is true when the text does not match the pattern.

const pin = document.querySelector('#pin');
pin.value = '1100';
console.log(pin.checkValidity());          // false
console.log(pin.validity.patternMismatch); // true
pin.value = '110001';
console.log(pin.checkValidity());          // true

The novalidate attribute on a form turns the built-in checks off. Developers use it when they write their own checks in JavaScript, which we do later in the course.