Matching the Password and Confirm Password Fields in jQuery

In this article, we are going to learn how to validate Password and Confirm Password fields of a form. That is, we will learn  to confirm that the passwords entered by the user in the two fields : Password and Confirm Password fields exactly match.

HTML file for “Matching the Password and Confirm Password Fields in jQuery”

Let us make an HTML file that displays three labels and three text fields for Userid, Password and Confirm Password as shown below:

<body>

<form>

<div><span>User Id </span><input  /></div>

<div><span>Password </span><input name=”password” /><span> Password cannot be blank</span></div>

<div><span>Confirm Password </span><input class=”confpass” /><span class=”error”> Password and Confirm Password don’t match</span></div>

<input value=”Submit”>

</form>

</body>

In the HTML file, the label messages User Id, Password and Confirm Password  are enclosed in span elements that are assigned class names: ‘label’. The input text fields are assigned the respective class names ‘userid’, ‘password’ and ‘‘confpass’  for retrieving the data entered in them via jQuery . Finally, all the input text fields are followed by the error message nested inside the span element of class ‘error’.

The reasons of assigning the classes to all the items items: label, error message and submit button is to automatically apply the properties defined in the class selectors ‘.label’,  ‘.error’ and ‘.submit’ (defined in the style sheet: style.css). Also, the combination of label, input text field and error are nested inside the div element so that we can apply style property to div element to creating spacing among each combination of label, input text field and error message.

The style sheet with the respective class selectors is as shown below:

style.css

.label {float: left; width: 120px; }

.error { color: red; padding-left: 10px; }

.submit { margin-left: 125px; margin-top: 10px;}

div{padding: 5px; }

In the style sheet file, the class selector: ‘.label’ contains the float property set to value: ‘left’ so as to make the label appears on the left side of the browser window (creating space for the input text field to appear on its right) and the width property is set to value 120px to define the width that the label can consume. The class selector ‘.error’ assigns the red color to the error messages  and for making the error message appear at the distance of 10px from the element on its left. The class selector ‘.submit’ contains the margin-left property set to value: 125px and margin-top property set to value:10px to make it appear at the distance of 125 px from the left border of the browser window (to appear below the input text fields) and at the gap of 10px from the element just above it. The type selector ‘div’ has the padding property set to value: 5px for creating some space among the div elements where each div element contains a combination of label, input text field and error message

The jQuery code to test that data entered in the Password and Confirm Password fields are exactly same is as shown below :

$(document).ready(function() {

$(‘.error’).hide();

$(‘.submit’).click(function(event){

data=$(‘.password’).val();

var len=data.length;

if(len<1)

{

$(‘.password’).next().show();

}

else

{

$(‘.password’).next().hide();

}

if($(‘.password’).val() !=$(‘.confpass’).val())

{

$(‘.confpass’).next().show();

}

else

{

$(‘.confpass’).next().hide();

}

event.preventDefault();

});

});

Before we understand the jQuery code, let us understand the usage of .next() method that is used in it:

.next()

This method retrieves the next following sibling in the specified element. Remember, this method returns the very next sibling for each element and not all next siblings like nextAll() method does

Syntax:

.next(selector)

where selector is an optional parameter used for specifying the selector expression for matching with the specified elements

Code for “Matching the Password and Confirm Password Fields in jQuery”

In the jQuery code, initially, we hide the error messages (elements nested inside the span element of class ‘error’). Thereafter, we attach a click event to the submit button. In the event handling function of the click event, we retrieve the data in the Password field (input text field of class ‘password’) and store it in variable ‘data’. If the length of the contents in variable ‘data’ is found less than 1  i.e. if user has not entered anything in the Password field, we make the element next to the password field (which is span element of class ‘error’) to appear on the screen i.e. we display the error message: ‘Password cannot be blank’  on the screen.

If the user has not left the password empty, we check whether the data entered in the password field and the Confirm password field (data in elements of class ‘.password’ and ‘.confpass’) are exactly the same. If the two don’t match, we display the error message (which is the element next to the Confirm Password field): ‘Password and Confirm Password’ don’t match’ on the screen. We also invoke the preventDefault() method of the event object to prevent the data entered by the user  from sending it to the server as we are mainly interested in just confirming that the data entered in Password and Confirm Password fields match

On execution of jQuery code, if we leave the Password field blank and select Submit button, we get the error message: ‘Password cannot be blank’  on the screen as shown in below given figure :

Error message appears if password is not entered

If the contents of Password and Confirm Password fields don’t match, we get the error message: ‘Password and Confirm Password don’t match’ as shown in below given figure

Error message appears if password and confirm password don’t match

This finishes my article on “Matching the Password and Confirm Password Fields in jQuery”

For more information, refer my book : “jQuery Recipes A Problem-Solution Approach” available at : http://www.amazon.com/jQuery-Recipes-Problem-Solution-Approach-Development/dp/1430227095/ref=sr_1_1?ie=UTF8&s=books&qid=1287320549&sr=8-1

More articles :

Forward Navigation Via Toolbar Buttons

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>