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:
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.




I noticed after you put a space in there, dosn’t matter what else, the script returns “STRONG” which I just typed a space.
[Reply]
@Braunson: Thats right. Currently any password with a combination of lower, upper and digits, or lower and digits, or upper and digits, or special characters (any character outside the a-z, 0-9 range) is considered strong.
In code that is: lower && upper && digit || lower && digits || upper && digits || special
Obviously this is a specialized password scheme. The purpose of this plugin is to provide a base implementation, either for direct use, or as a reference for your own implementation. And it abstracts the password rating from the strength meter display, so whatever your rating implemention looks like, there is no need to reimplement that password meter.
[Reply]
This only works AFTER the user has tabbed out of the text box. Is there a way to make this work as the user types?
[Reply]
@Rob: Yes, there is.
That will validate the input on each keypress.
[Reply]
Thanks Jörn. It seems calling $(“#password”).valid() (without keyup) on its own does the same thing.
[Reply]
cool plugin.. i use it now.. thank you very much
[Reply]
must in table, it then work???
[Reply]
Very, very nice plugin, I really like this. Thanks for explaining this.
[Reply]
just use this to my web apps..
thanks! mate
[Reply]
Great plugin! But when the password is not a required field, it still fails the validation (saying “too short”) of the form when the field is empty…
$('#form').validate({
rules:{
password:{
required:false,
password:true
}
}
}
If it’s not a required field and it’s empty, the validation plugin should take it as valid, isn’t it?
Many thanks!
[Reply]
I’m running into the same issue as Asodrober. I would like the password meter to work only when the password input is not blank. Is there a way to do this?
[Reply]
Replacing
return rating.rate > 2;
with
return (rating.rate > 2) || ((!$.data(element.form, 'validator').settings.rules.password.required) && (element.value==''));
in jquery.validate.password.js on line 83 worked for me!
Maybe it’s not the better way to do it, but it works!
[Reply]
Thanks for sharing! Works great
[Reply]
Trying to use this in conjuction with a password Mask/UnMask script (from here: https://github.com/aduth/jquery.passwordMask/blob/master/README.md)
However, when the password gets unmasked, the validation fails to work. the unMask scrip basically toggles the input of the password box from “password’ to “text”, so when it’s toggled to “text” the validation no longer works.
I don’t see anything within password.validate that specifically checks the input’s type, so not sure why it breaks when the input type switches to text… any help is appreciated.
[Reply]
per my last post (if it was approved). I’ve discovered it works fine when I do the validation for password field onblur. However, it doesn’t seem to work if I try to do the validation on the keyup event…
[Reply]
Jörn Reply:
December 11th, 2012 at 16:40
That’s a pretty terrible plugin – you can’t just change the type of an input element, so you actually have to insert a clone (read the source). Hardly a surprise that that fails in combination with this plugin. You should report the issue against the password mask plugin, since that breaks the event.
[Reply]
I wish I could easily add this to a larger additionalMethods library, but it automatically validates every password field and not just the ones with a class of “password”.
I also encountered problems using minify and closure. I had to manually add a couple of semicolons or it would throw an error.
[Reply]
@James Moberg: The plugin is pretty simple, so maintaing a modified copy on your end is probably your best bet. Interest in this plugin has been tiny for years, so I don’t have plans for updating it. Maintaing the main validation plugin is enough work already. I hope that works for you.
[Reply]