How to Create a Beautiful Password Strength Meter

DEMO - DOWNLOAD - SOURCE

Password Strength Meter

In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration.
A PSD file is also available, so you can customize the form to your liking.

The HTML

We start off with a standard HTML5 document that will include our registration form. The form will only serve as an example of the password meter – if you need support for actual registrations, you will need to write the required server-side code.

index.html

01<!DOCTYPE html>
02<html>
03    <head>
04        <meta charset="utf-8" />
05        <title>How to Make a Beautiful Password Strength Indicator</title>
06 
07        <!-- The stylesheet -->
08        <link rel="stylesheet" href="assets/css/styles.css" />
09 
10        <!--[if lt IE 9]>
11          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12        <![endif]-->
13    </head>
14 
15    <body>
16 
17        <div id="main">
18 
19            <h1>Sign up, it's FREE!</h1>
20 
21            <form class="" method="post" action="">
22 
23                <div class="row email">
24                    <input type="text" id="email" name="email" placeholder="Email" />
25                </div>
26 
27                <div class="row pass">
28                    <input type="password" id="password1" name="password1" placeholder="Password" />
29                </div>
30 
31                <div class="row pass">
32                    <input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
33                </div>
34 
35                <!-- The rotating arrow -->
36                <div class="arrowCap"></div>
37                <div class="arrow"></div>
38 
39                <p class="meterText">Password Meter</p>
40 
41                <input type="submit" value="Register" />
42 
43            </form>
44        </div>
45 
46        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
47        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
48        <script src="assets/js/jquery.complexify.js"></script>
49        <script src="assets/js/script.js"></script>
50 
51    </body>
52</html>

We are including the latest version of jQuery, the Complexify plugin and our script.js right before the closing body tag for better performance.

jQuery

The jQuery code below is quite straightforward. We are binding a number of events to the form elements and validating them. If an error was encountered, we add an “error” class to the .row div that contains the input. This will display the red cross. The “success” class on the other hand will display a green check mark. When the form is submitted, we check whether all of the rows are marked as successful for allowing the submission.

assets/js/script.js

01$(function(){
02 
03    // Form items
04    var pass1 = $('#password1'),
05        pass2 = $('#password2'),
06        email = $('#email'),
07        form = $('#main form'),
08        arrow = $('#main .arrow');
09 
10    // Empty the fields on load
11    $('#main .row input').val('');
12 
13    // Handle form submissions
14    form.on('submit',function(e){
15 
16        // Is everything entered correctly?
17        if($('#main .row.success').length == $('#main .row').length){
18 
19            // Yes!
20            alert("Thank you for trying out this demo!");
21            e.preventDefault(); // Remove this to allow actual submission
22 
23        }
24        else{
25 
26            // No. Prevent form submission
27            e.preventDefault();
28 
29        }
30    });
31 
32    // Validate the email field
33    email.on('blur',function(){
34 
35        // Very simple email validation
36        if (!/^\S+@\S+\.\S+$/.test(email.val())){
37            email.parent().addClass('error').removeClass('success');
38        }
39        else{
40            email.parent().removeClass('error').addClass('success');
41        }
42 
43    });
44 
45    /* The Complexify code will go here */
46 
47    // Validate the second password field
48    pass2.on('keydown input',function(){
49 
50        // Make sure it equals the first
51        if(pass2.val() == pass1.val()){
52 
53            pass2.parent()
54                    .removeClass('error')
55                    .addClass('success');
56        }
57        else{
58            pass2.parent()
59                    .removeClass('success')
60                    .addClass('error');
61        }
62    });
63 
64});

With this out of the way, we can move on with the Complexify plugin that will validate the password. The plugin takes a callback function with two arguments – a percentage value from 0 to 100 depending on the complexity of the password, and a valid flag that takes into account the minimum length requirement, defined by the minimumChars property.

By tweaking the strengthScaleFactor property you can allow simpler passwords to be used. The default scale is 1 which requires a mix of upper and lower case letters, numbers and special characters, but I found it too strict so I lowered it to 0.7. You can lower it further if you need even simpler passwords.

01pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
02 
03    if(valid){
04        pass2.removeAttr('disabled');
05 
06        pass1.parent()
07                .removeClass('error')
08                .addClass('success');
09    }
10    else{
11        pass2.attr('disabled','true');
12 
13        pass1.parent()
14                .removeClass('success')
15                .addClass('error');
16    }
17 
18    var calculated = (complexity/100)*268 - 134;
19    var prop = 'rotate('+(calculated)+'deg)';
20 
21    // Rotate the arrow. Additional rules for different browser engines.
22    arrow.css({
23        '-moz-transform':prop,
24        '-webkit-transform':prop,
25        '-o-transform':prop,
26        '-ms-transform':prop,
27        'transform':prop
28    });
29});

If a valid value has been passed, we will enable the second password field (it is disabled by default). We will also use CSS3 transformations to rotate the arrow. The transformation will be animated thanks to a transition property which you can see in the CSS section. The arrow moves from -134 to 134 degrees (the default 0 degrees correspond to the arrow pointing vertically up), so the code compensates for that.

CSS

I will include only the more interesting parts of the stylesheet here. The code that follows styles the arrow and defines a transition.

assets/css/styles.css

01#main form .arrow{
02    background: url("../img/arrow.png") no-repeat -10px 0;
03    height: 120px;
04    left: 214px;
05    position: absolute;
06    top: 392px;
07    width: 11px;
08 
09    /* Defining a smooth CSS3 animation for turning the arrow */
10 
11    -moz-transition:0.3s;
12    -webkit-transition:0.3s;
13    -o-transition:0.3s;
14    -ms-transition:0.3s;
15    transition:0.3s;
16 
17    /* Putting the arrow in its initial position */
18 
19    -moz-transform: rotate(-134deg);
20    -webkit-transform: rotate(-134deg);
21    -o-transform: rotate(-134deg);
22    -ms-transform: rotate(-134deg);
23    transform: rotate(-134deg);
24}
25 
26/* The small piece that goes over the arrow */
27#main form .arrowCap{
28    background: url("../img/arrow.png") no-repeat -43px 0;
29    height: 20px;
30    left: 208px;
31    position: absolute;
32    top: 443px;
33    width: 20px;
34    z-index: 10;
35}

You can find the rest of the code in assets/css/styles.css. The best way to learn how it all works is by inspecting the working demo with Firebug or Chrome’s Developer tools and playing with the styles.

We’re done!

You can build upon this example and use it to present an eye catching validation option for your customers. And it is even easier to customize with the included PSD.