The Constraint Validation API
Read validity states and check constraints with JavaScript.
Validation Without JavaScript
HTML5 introduced built-in form validation via attributes: required, type="email", type="number", min, max, pattern, minlength, maxlength. The browser validates automatically on submit and shows error messages, with no JS required.
<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>CSS Validation Selectors
:invalid matches inputs that fail validation; :valid matches passing inputs. :user-invalid (modern) matches only after user interaction — avoiding red borders on a pristine form. Style errors with these pseudo-classes.
input:user-invalid {
border-color: red;
}
input:user-invalid + .error {
display: block;
}All lessons in this course
- The FormData API
- The Constraint Validation API
- reportValidity and setCustomValidity
- Form Reset Events and State Management