JAVASCRIPT

Comparing Fields and Customizing Error Messages with jQuery`s Validator Plug-in

Welcome to the final installment of the series that shows you how to check online forms with the Validator jQuery plug-in. Made up of seven tutorials, this series explores the most useful features that come packaged with this library, and shows you how to use them for performing strict validation on your own HTML forms.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

November 10, 2009

TABLE OF CONTENTS:

As I said in the section that you just read, the Validator plug-in provides another useful option called “equalTo” that permits you to determine if the values entered into two form fields are equal. Naturally, this feature can be really handy for implementing a password confirmation system, to cite only one example.

But the best way to understand how the “equalTo” option works is by means of a functional example. Below I coded one for you. Take a look at it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on validating web form with the equalTo argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

username: {

required: true,

maxlength: 10

password: {

required: true,

maxlength: 10

passwordconfirm: {

required: true,

equalTo: "#password"

}

});

</script>

</head>

<body>

<p>Password <input type="password" id="password" class="required" /></p>

<p>Confirm Password <input type="password" name="passwordconfirm" class="required" /></p>

</form>

</body>

</html>

As shown above, the “equalTo” option has been used to compare the values entered in the “password” and “passwordconfirm” fields of the previous web form. If those are found to be distinct, then an error message indicating this condition will be displayed on screen. Simple and effective, right? However, if you still have some doubts regarding the use of this option, then the following screen capture should help to dissipate them:

Undoubtedly, understanding how the “equalTo” argument does its business is indeed a no-brainer process that doesn’t require any further explanation. Therefore, it’s time to tackle the last section of this tutorial, which will explain how to display customized error messages with the Validator plug-in.

As usual, to learn how this will be done, please click on the link shown below and read the final part of this article.

Next: The showErrors() method >>