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
While incredibly easy and super lightweight, this approach does have a few shortcomings.
- You can style fields that have errors on them with the
:invalidpseudo-selector, but you can’t style the error messages themselves.
- Behavior is also inconsistent across browsers.
Check it out!