This series of posts on using jQuery with no prior knowledge comes to its third iteration. Today's post focuses on an introduction to the Validation Plug-in. This plug-in extends jQuery by adding simple client-side validation to a given HTML form. In future entries we'll examine some of the challenges this plug-in has with traditional ASP.Net web form applications; however, for this post, we'll focus on just the basics.
If you would like to review the previous posts in this series, please feel free to review the links below:
In order to use the Validation plug-in, you'll need to add a few things to your web page:
The jQuery Validation Plug-in that I'm using in this example was written by Jörn Zaefferer. His web site houses all of the documentation I used to learn how to use the plug-in. If, after reading this post, you want to explore more, I highly encourage anyone to go to his site. It's a great resource.
The jQuery Validation Plug-in works by examining the DOM of an HTML form and then assigning rules to the various field elements. Optional, custom messages can be assigned to these validation rules as well to enhance the user experience.
Before we dive into the plumbing of the Validation Plug-in, let's first draw up a simple HTML form.
Copying the HTML above to a file and viewing it in a browser should present you with a form similar to the following image:
Our HTML form, TestForm, is very simple. It contains simply 2 set of labels and text boxes for the user to input a user's First and Last Name. The text boxes have their Title attribute set for accessibility reasons and to be used by our validations.
There are two ways we can add validation to the form. We can add it by predefining the rules per form field, or add the rules in programmatically. For today's topic, we'll look at predefining the rules in the form's jQuery representation.
Like previous posts that focused around rounded corners and center alignment, we'll need to setup the validation rules when the document element is ready.
Inside the function to be called when the document element is ready, we're going to need to select our TestForm through jQuery and call the validate() function. The validate() function allows us to set the rules (and messages later on) for each of our form fields. Let's look at the code for our form.
The validate() function takes an array of objects for an input parameter. In the above snippet of code, we are passing in a rules object. This rules object has an entry for each of our text box fields of our form. For our example, we are requiring that both fields are required and the Last Name field requires 2 or more characters.
That's it. We have successfully wired up simple validation to our form.
After we add our script to our HTML and refresh our browser, we can submit the form to find that our fields now show off our required field validations.
Filling in the First Name and only a single character for the Last Name we also see our minimum length validation in action as well.
Something that you may notice is the error text is the same for each of the rules. In addition, the error text is the same as the text box Title attribute values. In order to change this error text, we can add another object to the validate() method of our script. Let's append the object array parameter by adding a messages object as shown below.
Just like the rules object from before, the messages object contains elements of the same name as our form fields. These elements contain a mapping between the rules and the message to display once validated. If a rule is presented without a message, the Title attribute will be used still.
Making these updates and saving our HTML file, we can refresh our browser window to view the changes.
In the even that the Title attribute is not present, canned messages relative to the rules will be displayed in a similar fashion as the messages object that we just added.
Below is the full HTML code:
That's it for this post. Next week, I'll be back in my routine and will be exploring how to programmatically add and remove rules as well as to examine some of the other rules that are available out of the box. Later, we'll dive into creating custom rules.
Download Code: Starting with jQuery - Validation Plug-In.zip