JQuery_ Novice to Ninja - Earle Castledine [97]
Form Validation with the Validation Plugin
Building your own inline validation system can be a daunting endeavor; you need to know regular expressions to be able to verify that an email address or phone number is valid, for example. The Validation plugin solves a lot of these problems for you, and lets you add sophisticated and customizable inline validation to most forms with minimal effort.
We’ll stop short of going over every option available for use with this plugin here (that would fill a whole chapter!), but we’ll look at the most common ones.
Let’s start with the form. To illustrate as many of the different validation options, we’ll go with a sign-up form that includes password and password confirmation fields:
chapter_07/05_validation_plugin/index.html (excerpt)
Sign up
To use the Validation Plugin, we simply need to call validate on a selection of our form, passing it any options we want to use. The most important option is rules, which is where you need to define rules used to validate the users’ input:
chapter_07/05_validation_plugin/script.js (excerpt)
$('#signup form').validate({
rules: {
name: {
required: true,
},
email: {
required: true,
email: true
},
website: {
url: true
},
password: {
minlength: 6,
required: true
},
passconf: {
equalTo: "#password"
}
},
success: function(label) {
label.text('OK!').addClass('valid');
}
});
There are a considerable number of predefined validation rules available, and of course you can define your own. You’ll need to consult the documentation to learn about all of them. Here we’ve used required, email, url, minlength, and equalTo.
required marks a field as required, so it will be flagged as an error if it’s empty. email and url validate the format of the field; emails must contain an @, URLs must begin with http://, and so on. Inside the rules object, we define an object for each form field, named after the field’s id. minlength is self-explanatory (and, as you’d expect, there’s a corresponding maxlength). Finally, equalTo allows us to specify a jQuery selector pointing at another form field, the contents of which will be checked against the current field to see if they’re the same.
The Validation plugin will add a new label element after each form field to contain the error message; by default this will have a class of error, so you’re free to style it in as stern a fashion as you’d like.
By default, the plugin will only display a message if a field’s value is invalid. User research has shown, however, that users complete forms more quickly and confidently if they’re also provided with feedback for correct entries. That’s why we’re using the success callback to set the value of the message label, and giving it a class to style it with a nice green check mark. success is passed the message element itself, so you can manipulate it in any way you’d like. Our sample form is illustrated mid-completion in Figure 7.1.
Figure 7.1. Inline validation with the Validation plugin
It’s also possible to customize the error messages themselves, and it’s worth noting that there are a number of localized variants in the localization folder of the plugin directory.
This example is just the beginning of what’s possible with the Validation plugin. Make sure you consult the documentation and the examples in the plugin’s demo folder to explore all the available features.