jQuery `Password Validation`

The jQuery Password Validation plugin extends the jQuery Validate plugin, providing two components:

You can easily customize the appearance of strength indicators, localize message displays, and integrate it into existing forms.

The current version of the plugin is 1.0.0.

Usage

To use the Password Validation plugin, add a class "password" to the input, and include the basic markup for strength display where needed in the form:

<form id="register">
    <label for="password">Password:</label>
    <input class="password" name="password" id="password" />
    <div class="password-meter">
        <div class="password-meter-message"> </div>
        <div class="password-meter-bg">
            <div class="password-meter-bar"></div>
        </div>
    </div>
</form>

Apply the Validate plugin to the form:

$(document).ready(function() {
  $("#register").validate();
});

You can override $.validator.passwordRating to implement different rating methods. Or override $.validator.passwordRating.messages to provide other messages, such as localization.

Example Demonstration

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});
</script>
</body>
</html>

View Demo

❮ Jq Sel Not Event Namespace ❯