Inline Validation Made Easy

validation-mike

Update August 2015: Now HTML5 lets you validate forms without the need for any JavaScript. See: http://www.the-art-of-web.com/html/html5-form-validation/

Here’s the original article, for posterity:

One way of making web forms less painful is to use inline validation.

This jQuery plugin makes it easy for designers and developers to add inline validation to web-based forms.

I like this plugin because it uses logical validation rules. Using the plugin, I can see that if I enter my email address incorrectly, I will get an error message immediately upon leaving the field.

I also like that I do not get an error message for leaving the other fields blank — until I hit the submit button.

Error messages on fields that are left blank is a common mistake of inline-validated forms, which unfortunately leads to a terrible user experience. Users should be free to fill in fields in the order they wish, without having to see “error” messages beside each field they intentionally left blank. Thankfully, the jQuery validation plugin doesn’t commit this crime.

validation-errors