Client Side Validation with jQuery

added by mceranski
2/25/2010 4:15:10 PM


Validating user input on the client definitely has its advantages. It not only avoids unnecessary round trips to the server but it can also drastically improve the user experience. When I think about client side validation I think about jQuery. If you are familiar with jQuery, then you know that there are a ton a plug-ins available. Just like an Apple IPod has “an app for that”, jQuery has a “plugin for that”. Anyway, after a quick search I discovered the jQuery Validation plugin. There are two different ways to use the Validation plugin. The first way, is to the pure JavaScript route. This means you establish all the validation rules, messages and callback events from code. The second way is to decorate your input fields with special CSS classes. The plugin will then inspect the class attribute of each field at runtime and apply validation rules accordingly. In the upcoming example, I used the CSS approach. However, if you decided that you want to go in the other direction there are some excellent demos on the validation plugin homepage.