Skip to main content Accessibility Feedback

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.

  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.

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!


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips