Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, 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.

1. You can style fields that have errors on them with the :invalid pseudo-selector, but you can't style the error messages themselves.
2. Behavior is also inconsistent across browsers.

User studies from Christian Holst…

Form Validation Part 2: The Constraint Validation API (JavaScript) is a post from CSS-Tricks