At the time of registration or change password we need to provide password, so for this we usually implement Confirm password functionality.
Example: In the below example I want to confirm password on form submit, so for this I have created a function matchPasswords() to match the passwords and added the onSubmit handler to form. This function will check whether the passwords are matched or not, if not then it will display an error message otherwise it alerts saying "Passwords Matched!"
<html>
<head>
<title>Demo Confirm password</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function matchPasswords() {
var pass1 = $("#password").val();
var pass2 = $("#retypePassword").val();
var isMatched = true;
if (pass1 != pass2) {
$("#confirmPass_error").text("Passwords don't match.");
$("#retypePassword").css({"borderColor":"#E34234"});
isMatched = false;
}
else {
alert("Passwords Matched!");
}
return isMatched;
}
</script>
<style>
.error{color: #db4437;font-size:12px;}
</style>
</head>
<body>
<form name="changePassword" id="changePassword" onsubmit="return matchPasswords();">
<div class="form-group form-group-space">
<label for="inputEmail3" class="col-xs-4 control-label">New Password</label>
<div class="col-xs-8">
<input type="password" id="password" class="form-control" placeholder="New Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-xs-4 control-label">Retype Password</label>
<div class="col-xs-8">
<input type="password" id="retypePassword" class="form-control" placeholder="Retype Password">
<span id="confirmPass_error" class="error"></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-4 control-label voting"> </label>
<div class="col-xs-8">
<button type="submit" class="btn btn-default comment-text">Change password</button>
</div>
</div>
</form>
</body>
</html>
Hope this will help you :)
0 Comment(s)