Home Tutorial Ajax Jquery jQuery password validation

 
 

jQuery password validation
Posted on: December 4, 2009 at 12:00 AM
Advertisement
jQuery "equalTo: "#password" " is the method to validate or check password if the element is empty (text input) or unequal password type entered.

jQuery password Validation :

jQuery "equalTo: "#password" " is the method to validate or check password if the element is empty (text input) or  unequal  password type entered. With the help of this password validation we can check that password and verify password are equal.   

Getting Started with jQuery "equalTo: "#password"" :

In this example there are the following steps which are used to make jQuery  "equalTo: "#password" ". This example  Makes "field" always required. Nothing, blanks and unequal  password type are invalid.

Step 1: In the first step we make css to create the text field background, height, width and other things

cmxform.css :

form.cmxform {

width: 370px;

font-size: 1.0em;

color: #333;

}

form.cmxform legend {

padding-left: 0;

}

form.cmxform fieldset {

border: none;

border-top: 1px solid #C9DCA6;

background-color: #F8FDEF;

}

form.cmxform label.error, label.error {

color: red;

font-style: bold

}div.error { display: none; }input {border: 1px solid black; }

Step 2: In the second step we make the connection with jquery plugins which are jquery1.js , jquery.validate.js and connection with css page.

<link rel="stylesheet" type="text/css" media="screen" href="../../plugin/cmxform.css" />

<script src="../../plugin/jquery1.js" type="text/javascript"></script>

<script src="../../plugin/jquery.validate.js" type="text/javascript"></script>

Step 3: In the third step we will make the HTML part, the HTML required for  the front end for this text field .With the help of this text field we check that the required field should not be empty and it should not be unequal to passwords each other .

<html>

<body>

<form class="cmxform" id="myform" method="post" action="">

<fieldset>

<p>

<label for="password">Password:</label>

<input id="password" name="password" />

</p>

<p>

<label for="password_again">Retype:&nbsp;&nbsp;&nbsp;&nbsp;</label>

<input class="left" id="password_again" name="password_again" />

</p>

<p>

<input class="submit" type="submit" value="Validate!"/>

</p>

</fieldset>

</form>

</body>

</html>

Step 4: In the last step we will make the jQuery part , the jQuery required for  the checking the validation for specified  text field .With the help of this jQuery  we check that the required field should not be empty and validated field should be of the equal to each other.

<script type="text/javascript">

$(document).ready(function() {

$("#myform").validate({

rules: {

password: "required",

password_again: {

equalTo: "#password"

}

}

});

});

</script>

After using the following steps the required text field will validated and we can check the validation by clicking on the submit button.

online demo: jQuery required validation
Advertisement

Related Tags for jQuery password validation:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 4, 2009

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com