Hi guys. Today I’m going to show you how to add some intelligence to your password forms. A strong password can mean the difference between your  user’s account being safe and them being easily compromised. Thankfully, with the help of modern JavaScript frameworks like jQuery it’s possible to check the strength of your user’s passwords before they’re able to register with your site. In addition to this helping them, you’re also demonstrating that you and your site take security very seriously. But how do you add something like a password strength meter to a password field? In this post, I’ll explore how you can do it easily in just 5 minutes.

If you’re going to check a user’s password, chances are you’ll want to use some form of intelligent regular expressions to check that they’ve done sensible things like..make their password long, included some additional characters in there, possibly a few numbers as well as a combination of upper and lowercase lettering.

Thankfully, there’s a great new jQuery plugin that will do all of this for you. All you need to do is initialize it by passing in the ID of the password field in your form. You are also able to specify additional style options so that show it above your field, to the side or beneath it.

To add the Password Strength Meter to your fields

1. Download the Password Strength Meter javascript plugin file from here.

2. Include either a CDN or local version of the jQuery plugin and the plugin downloaded from step 1 in your page

3. Initialize your password field using the plugin as follows (where "password_test" is the class attached to my password field)

        <script>
            $(document).ready( function() {

                $(".password_test").passStrength({
                   
                    });
            });
        </script>

4. You can also use a nice preconfigured css file with your page which will add some graphics to the strength message.

Optional

5. The plugin is quite robust and if you would like to re-position the strength message above the field you can specify a css class for each possible message so it can have any colored background, formatting or imagery in there that suits your page styles.

        <script>
            $(document).ready( function() {
                $(".password_adv").passStrength({
                    shortPass:         "top_shortPass",
                    badPass:        "top_badPass",
                    goodPass:        "top_goodPass",
                    strongPass:        "top_strongPass",
                    baseStyle:        "top_testresult",
                    userid:            "#user_id_adv",
                    messageloc:        0
                });
            });
        </script>

and that’s it! I hope this article was useful.

Related posts:

1. How To Add Form Validation using jQuery in 2 Easy Steps     Hi everybody. Sometimes you may find yourself...
2. How to highlight terms on your page using jQuery Today I came across a really useful plugin for jQuery...
3. How to easily add a Google Map using jQuery and an address in less than 5 minutes   Hi guys. Today I thought we’d take a look...
4. How to elegantly rescale your image using jQuery   So you’ve just spent 30 minutes coming up...
5. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

Related posts brought to you by Yet Another Related Posts Plugin.