jQuery validation for confirm password

How to validate password and confirm password using jQuery validation plugin ?

Earlier we have discussed how to validate a form validation with jQuery validate plugin, in this tutorial we’ll check how to validate password and confirm password using the same jquery validate plugin.

We can easily validate password and confirm password using jQuery validation plugin. In this tutorial I will explain how to validate password and confirm password with example using jQuery. The values of new password and confirm password are compared using the equalTo method in jQuery validation plugin.

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>jQuery validation</title>
	<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>
	<style type="text/css">
		.span
		{
			margin-left: 40%;
			margin-top: 5%;
		}
		.error
		{
			color:red;
		}
	</style>
</head>
<body>
	<div class="span">
	    <h2 class="text-center">Change Password</h2>
	    <form id="validate" method="POST" action="">
	    <label>Current Password</label>
	    <input type="password" name="current" class="span3">
	    <label>New Password</label>
	    <input type="password" name="new" id="new" class="span3">
	    <label>Confirm Password</label>
	    <input type="password" name="confirm" class="span3">	
	    <br>    
	    <input type="submit" value="Sign up" class="btn btn-primary pull-right">
	    <div class="clearfix"></div>
	    </form>
	</div>
</body>
</html>

Create a form with your required fields.
Include the below files to give some basic designs,

Bootstrap css : https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css

Bootstrap js : https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

3. Include the jquery.js file

jQuery.js : https://code.jquery.com/jquery-1.11.1.min.js

4. The next step is to include the plugin files. I have included jQuery validate js file and its additional methods file. The additional methods file will let you to set some optional rules.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>

jQuery :

<script type="text/javascript">
	$(document).ready(function() {
   		$("#validate").validate({
	      	rules: {
	         	current: 'required',
	         	new: 'required',
	         	confirm: {
	            	required: true,
	            	equalTo : "#new",
	         	},
	      	},
	      	messages: {
			   	current: 'Current Password is required',
			   	new: 'New Password is required',
			   	confirm: {
			   		required : 'Confirm Password is required',
			   		equalTo : 'Password not matching',
			   	}
			},
	   });
	});
</script>

In this jQuery part call the class validate() by specifying the form id
rules defines whatever the validation rules we want to apply
1. specify the name of form fields and validation rule
2. we can specify multiple rules to a single field by enclosing the rules in a curly braces. we can specify messages for each rules also.
messages is an optional part and it will show the customized error messages we are giving. If you dont want the custom error messages just remove the messages part and it will show the default error messages.
Here we are using the equalTo rule for matching passwords. Specify the id of the other field which we want to match with our field.

Post Views: 8,686