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.
@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.
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?
@Rob: Yes, there is.
That will validate the input on each keypress.
Thanks Jörn. It seems calling $(“#password”).valid() (without keyup) on its own does the same thing.
cool plugin.. i use it now.. thank you very much
must in table, it then work???
Very, very nice plugin, I really like this. Thanks for explaining this.
just use this to my web apps..
thanks! mate
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!
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?
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!