jQuery Form Validation

Asif Ahmed

Programming for the web involves creating a lot of forms. Creating forms could be regarded as one of the key things a backend programmer does. Forms can often be the method in which data is also stored into a database. This WYSIWYG editor in which I’m writing this content is a form. When you update your Facebook status that is another form. When you sign into your bank account, that is also a form. Forms are literally everywhere on the web!

So how does one go about validating forms and ensuring that the user has entered valid data. We should have backend form validation with PHP, Ruby, Python, etc. but why should we wait until a form has been submitted to validate it. Why can’t we do it on the front end also. (It should be important to understand that front end form validation IS NOT a substitute for backend validation, but rather, a complement). Well we can, but often programming front end validation can be a pain. Our goal should be to find a good plugin that can before front end form validation easily. Well, luckily for us there are tons of plugins out there exactly for this purpose, but one plugins shines much much brighter than the rest. This is absolutely (!) the best form validation plugin I have come across – jQuery Validation Engine. Here is a link to read the documentation. And here is the link if you want to view demos of this jQuery form validator in action.

Why is this plugin so good? Well, it’s easy to use…all you have to do is add validate[required] to the class of your input. Something like this

<input class="validate[required] style_class_1" 
name="sample_input" type="text" />

would validate this input and display a popup whenever someone forgets to fill out this input when submitting your form. It also has rules to validate for email, phone numbers, and minimum/maximum length. It can validate checkboxes, dropdowns, and radio buttons. Not only is it easy to use from a developer’s perspective (and the documentation is great!), it is also amazing from a user’s perspective. If a user enters a field incorrectly (by forgetting to fill out a required field, by writing a non-email in an email field, etc.) this validator will pop up a nice tooltip looking message in a red box right by the incorrect field. It will also scroll you up/down to the proper location in the form so that it is OBVIOUS what field you missed and how you messed up on it.

If you are a form developer please check out the form validation plugin. It will not only make your life easier, but it will also make the lives of your users easier.