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


No more comments.
  1. 28. May 2009 |19:14

    I noticed after you put a space in there, dosn’t matter what else, the script returns “STRONG” which I just typed a space.

  2. 29. May 2009 |08:39

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

  3. Rob
    4. August 2009 |08:47

    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?

  4. 4. August 2009 |09:14

    @Rob: Yes, there is.

    $("#password").keyup(function() {
      $(this).valid();
    });

    That will validate the input on each keypress.

  5. Rob
    5. August 2009 |05:52

    Thanks Jörn. It seems calling $(“#password”).valid() (without keyup) on its own does the same thing.

  6. 11. January 2010 |09:35

    cool plugin.. i use it now.. thank you very much

  7. yulin
    8. October 2011 |03:03

    must in table, it then work???

  8. 15. January 2012 |20:06

    Very, very nice plugin, I really like this. Thanks for explaining this.

  9. 17. January 2012 |13:58

    just use this to my web apps..

    thanks! mate :)

  10. Asodrober
    20. January 2012 |09:55

    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!

  11. Quakkels
    20. January 2012 |18:05

    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?

  12. Asodrober
    24. January 2012 |13:42

    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! :)

  13. 16. August 2012 |09:36

    Thanks for sharing! Works great :-)

  14. Paul
    11. December 2012 |15:24

    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.

  15. Paul
    11. December 2012 |16:19

    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…

    Jörn Reply:

    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.

  16. James Moberg
    15. February 2013 |18:48

    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.

  17. 22. February 2013 |23:32

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