Need to use password strength in jquery validation

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">&nbsp;</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>