Form validation is a very important part of any web application. You have to make sure that your users are going to enter a numerical value when they put data into a quantity field (You don’t want them to enter “one” into a quantity field, unless of course you want to try and handle that kind of input). However it goes much deeper than just requiring a number. You have phone numbers, URL’s, email addresses, numbers that can’t be negative. It goes on and on.
jQuery has a plug in that will handle all your form validation needs. It is called the jQuery Validation Plugin. It is once of the earliest plug ins that were developed for jQuery. What it allows you to do is define what form elements needs to be validated, how to validate the element, and what to do if the element is invalid.
This post has an accompanying demo that can be found here.
Hot Linking The jQuery Validation Plugin
Microsoft allows hot linking of the Validation Plugin so you do not have to host the library. The URL of the plugin is: http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js
Basic Validation
This form has very basic validation. It is ideal if you want quick and dirty validation of a form. All you have to do is put your validation rules into the class attribute for your form input elements (there are some other elements that these can go into). The form is automatically validated when the form submit button is clicked, but before the form is actually submitted.
In the example, the required value in the class attribute specifies that the field is required. Any value inside of the element is acceptable. It just cannot be blank. The email value in the class attribute requires that the value in the input field be an email address. The url value in the class attribute requires that the value in the input field be formatted as an URL (complete with the http:// at the beginning)
Some of the basic validation can take place outside of the class attribute. These tend to go inside of their own attributes on the input element. For example, the minlength attribute. The minlength attribute, specifies that the input tag be a specific length.
