jQuery plugin: Password Validation

This plugin extends the jQuery validation plugin, providing two components:

  • A function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional).
  • A custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. The text displayed can be localized.

In its simplest form, the rating looks like this:

You can easily customize the appearance of the strength meter and localize the messages and integrate it into existing forms.

To use the plugin, add a class “password” to your input, as well as the base markup for the strength meter, wherever you want to display it in your 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>

And apply the validation plugin to the form:

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

You can override $.validator.passwordRating with your own implementation for a different rating approach. Or override $.validator.passwordRating.messages to provide other messages, eg. localized.

Current version: 1.0.0
License: MIT/GPL

Files:

Download
Demos

Dependencies

Required

Support

  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validatepassword”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.

Donate

$ USDDonate€ EURDonate