Checking Online Forms with the Validator jQuery Plug-in

Validating online forms has always been a crucial web development topic, inspiring many passionate debates. The subject of form validation always seems to generate tons of feedback when posted in a forum. Regardless of the opinions you might have about it, you'll surely agree that checking data submitted through a web form is a mandatory process, and must be performed on the web server, whether or not this data has been previously verified in the client via JavaScript.

Typically, however, an online form that collects a huge amount of information needs to be enhanced with a client-side mechanism that tells users what type of data should be entered in a specific field, or of there's an offending field that needs to be repopulated.

Of course, to accomplish this in an elegant and professional way, you might want to develop a custom JavaScript application, capable of displaying input errors in a truly responsive way. This approach can be not only time-consuming, but may not produce the results that you'd expect.

Fortunately, there's no need to reinvent the wheel when it comes to checking online forms in the client. Thanks to JavaScript libraries like jQuery, Prototype and so forth, there are a growing number of plug-ins that permit you to achieve this process in a truly painless fashion. Best of all, you'll only need to write a few lines of unobtrusive JavaScript code.

The Validator plug-in developed by Jörn Zaefferer at  is a JavaScript masterpiece that allows you to validate online forms in all sorts of clever ways, without having to mess up your fancy markup with online event handlers. Thus, in this series of articles, I'll be taking a closer look at this plug-in, so you can enjoy its powerful form-checking features as much as I did myself.

Now, it's time to get rid of the preliminaries and learn how to use this handy jQuery plug-in to make client-side form validation a truly fun experience. Let's jump in!