Need to use password strength in jquery validation
Hi,
I am using
http://bassistance.de/jquery-plugins/jquery-plugin-password-validation/ for password strength along with jquery.validate.js.
jquery.validate.password.js - version 1.0
jquery.validate.js - version 1.13.1
jquery - version 1.11.2
But seems it is not working properly.. i have old password, new password and confirm new password..
I need to have password strength for new password, but when i type old password, password strength changing and also confirm new password not displaying proper error message when not matching with new password..
Below is my code:
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
old_password: {
required: true,
minlength: 2
},
new_password: {
required: true
},
password_confirm: {
required: true,
equalTo: "#new_password"
}
},
messages: {
old_password: {
required: "Enter old password",
minlength: jQuery.validator.format("Enter at least {0} characters")
},
new_password: {
required: "Enter new password",
minlength: jQuery.validator.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.validator.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
}
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
error.prependTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
<form id="signupform" autocomplete="off" method="get" action="">
<table>
<tr>
<td class="label"><label for="old_password">Old password</label></td>
<td class="field"><input id="old_password" name="old_password" type="password" value="" maxlength="50" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label for="new_password">New password</label></td>
<td class="field"><input id="new_password" name="new_password" type="password" maxlength="50" value="" /></td>
<td class="status">
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="label"><label for="password_confirm">Confirm Password</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Signup" />
</td>
</tr>
</table>
</form>