Vanilla JavaScript form validation and the constraint validation API
Yesterday, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type="email">
) and validation attributes (such as required
and pattern
).
While incredibly easy and super lightweight, this approach does have a few shortcomings.
- You can style fields that have errors on them with the
:invalid
pseudo-selector, but you can’t style the error messages themselves. - Behavior is also inconsistent across browsers.
In today’s article on CSS Tricks, I walk you through how to use the Constraint Validation API and some lightweight vanilla JavaScript to get our desired user experience—without relying on heavy JS libraries.
Check it out!