This week I released Validate.js, a lightweight, open source form validation script.
You can play with the demo here.
How is Validate.js different?
There are a ton of form validation scripts. There’s even a bunch of vanilla JS ones.
Validate.js hooks into the browser-native form input types (like
url) and validation attributes (like
min). All you need to do is include it on your site and run
validate.init(). The script handles the rest.
<div> <label for="email">Email</label> <input type="email" id="email" required> </div> <div> <label for="url">URL</label> <input type="url" id="url" required> </div>
Instead of the native pop-up errors on submit, Validate.js displays an error (if there is one) as soon as the user leaves each field. It also checks all fields on submit and brings the first one with an error into focus.
Want to submit successful forms via Ajax? Validate.js has you covered. You can disable page reload on submit and pass in whatever callback function you want instead.
Validate.js also lets you customize all of the error messages (you can also just use the defaults) and style them however you want.
What about browser support?
Out-of-the-box, it works in all modern browsers, and (mostly) IE 10 and above.
Unfortunately, not all validation types are supported by all versions of IE and Edge consistently. For example, IE10 and IE11 will check if a form input is too long (using the
maxLength attribute), but Edge will not. And no version of IE or Edge will check if it’s too short (using the
The script comes with a polyfill that pushes support back to IE10 (and adds missing features to partially supporting browsers). And if you include Eli Grey’s classList.js polyfill, you can push support back to IE9.