Tutorial: Create a Beautiful Password Strength Meter

Tutorial: Create a Beautiful 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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a Beautiful Password Strength Indicator</title>

        <!-- The stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="main">

        	<h1>Sign up, it's FREE!</h1>

        	<form class="" method="post" action="">

        		<div class="row email">
	    			<input type="text" id="email" name="email" placeholder="Email" />
        		</div>

        		<div class="row pass">
        			<input type="password" id="password1" name="password1" placeholder="Password" />
        		</div>

        		<div class="row pass">
        			<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
        		</div>

        		<!-- The rotating arrow -->
        		<div class="arrowCap"></div>
        		<div class="arrow"></div>

        		<p class="meterText">Password Meter</p>

        		<input type="submit" value="Register" />

        	</form>
        </div>

        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="assets/js/jquery.complexify.js"></script>
		<script src="assets/js/script.js"></script>

    </body>
</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.

Password Strength Meter

Password Strength Meter

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

$(function(){

	// Form items
	var pass1 = $('#password1'),
		pass2 = $('#password2'),
		email = $('#email'),
		form = $('#main form'),
		arrow = $('#main .arrow');

	// Empty the fields on load
	$('#main .row input').val('');

	// Handle form submissions
	form.on('submit',function(e){

		// Is everything entered correctly?
		if($('#main .row.success').length == $('#main .row').length){

			// Yes!
			alert("Thank you for trying out this demo!");
			e.preventDefault(); // Remove this to allow actual submission

		}
		else{

			// No. Prevent form submission
			e.preventDefault();

		}
	});

	// Validate the email field
	email.on('blur',function(){

		// Very simple email validation
		if (!/^\S+@\S+\.\S+$/.test(email.val())){
			email.parent().addClass('error').removeClass('success');
		}
		else{
			email.parent().removeClass('error').addClass('success');
		}

	});

	/* The Complexify code will go here */

	// Validate the second password field
	pass2.on('keydown input',function(){

		// Make sure it equals the first
		if(pass2.val() == pass1.val()){

			pass2.parent()
					.removeClass('error')
					.addClass('success');
		}
		else{
			pass2.parent()
					.removeClass('success')
					.addClass('error');
		}
	});

});

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.

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){

	if(valid){
		pass2.removeAttr('disabled');

		pass1.parent()
				.removeClass('error')
				.addClass('success');
	}
	else{
		pass2.attr('disabled','true');

		pass1.parent()
				.removeClass('success')
				.addClass('error');
	}

	var calculated = (complexity/100)*268 - 134;
	var prop = 'rotate('+(calculated)+'deg)';

	// Rotate the arrow. Additional rules for different browser engines.
	arrow.css({
		'-moz-transform':prop,
		'-webkit-transform':prop,
		'-o-transform':prop,
		'-ms-transform':prop,
		'transform':prop
	});
});

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

#main form .arrow{
    background: url("../img/arrow.png") no-repeat -10px 0;
    height: 120px;
    left: 214px;
    position: absolute;
    top: 392px;
    width: 11px;

   	/* Defining a smooth CSS3 animation for turning the arrow */

    -moz-transition:0.3s;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;

    /* Putting the arrow in its initial position */

	-moz-transform: rotate(-134deg);
	-webkit-transform: rotate(-134deg);
	-o-transform: rotate(-134deg);
	-ms-transform: rotate(-134deg);
	transform: rotate(-134deg);
}

/* The small piece that goes over the arrow */
#main form .arrowCap{
	background: url("../img/arrow.png") no-repeat -43px 0;
	height: 20px;
	left: 208px;
	position: absolute;
	top: 443px;
	width: 20px;
	z-index: 10;
}

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.

Join our newsletter and get our PSDs!19,451 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

41 Comments

  1. Seotop says:

    Very nice pwd-meter ;) Enjoyed it.

  2. xTG says:

    The render is very nice but the complexity checker looks really simply.
    I never used complexify but it seems in the demo that only the lenght of the password is a way to securize it... What about mix of numeric, letters and special characters ???
    With the percentage on the Dan Palmer's page it seems like it's count but just one percent more for non-letter character...
    But one more time it's a really cool design ! :)

    1. Martin Angelov says:

      The plugin adds different weights to different groups of characters. For example it gives more weight to cyrillic and arabic alphabets than to latin, but it does not force you to put different kinds of characters - you can construct your password only using lower case letters but you will have to provide a longer password.

      Of course you can easily replace it with a different plugin if you need to.

      1. xTG says:

        Yeah you're right, i was just thinking too much about off-topic. ^_^

    2. Dan Palmer says:

      Hi xTG,

      Just thought I'd try and explain briefly:

      Complexify works out the mathematical complexity of breaking the password. It actually does the real sums to work out how difficult that process would be based on the different range of characters you've used, and the length.

      It turns out, when you work it out, that the length of the password contributes far more to making it secure than adding special characters. For example, if you use a 10 character password with lowercase letters and numbers, the complexity is (26+10)^10 which is 3.6*10^15. However, if you use just lower case letters but have 12 characters, the complexity is 9.5*10^16, which is an order of magnitude higher!

      While it might seem a little counter-intuitive because of how people are educated about password security, I can assure you that it is mathematically sound.

  3. humbu says:

    I love your tutorials thanks

  4. Jexxie says:

    As always, this is beautiful.

    Thank you for these tutorials. I am grateful.

    Regards :)

  5. aniss says:

    awesome like always ;)

  6. Ahmad Awais says:

    Very nice design,it is quite engaging.

  7. Harry says:

    Very nice tutorial!
    This my give me ideas for my next Android app

  8. ahmad says:

    I loved everything in this form!
    thanks man!

  9. Martin Angelov says:

    Thank you for the awesome comments folks!

  10. Roberto P. says:

    Thanks, is very cool!!

  11. Erik says:

    Man it seem as "how much symbols in textfield"-meter.
    But cool design, and cool realisation.

  12. mubasshir pawle says:

    that was awwwesome...
    loved it

  13. Nick says:

    Martin it's nice, and i love that animated meter but i believe it's not quite practical because it keeps on increasing the meter value depending upon total number of characters and doesn't look whether i have mix letters or not.

    I have seen one on this site http://www.thetutlage.com/post=TUT152 , his regex seems to be better but your meter is too cool...

    I will use his regex and your designs to setup mine. :-)

    1. Martin Angelov says:

      Of course, you can modify it as you wish :)

  14. Abdullah al-haqbani says:

    WOW!
    Now this is some tasteful stuff :)

    1. Martin Angelov says:

      Glad you like it!

  15. Joe Jollands says:

    Very nice. Really looks good and works brilliantly.

  16. Great..very nicely done and self explanatory .. and of course design is very neat and clean.keep it up.

  17. Simon says:

    Nice, but getting a full strength password is hard work - i'd not wanna have to remember that every time..!

  18. lol I LOVED the meter-gauge for it. Awesome tutorial. Might use it in the near future!!

  19. A reader says:

    Why is simply increasing the amount of characters used increasing the password its strength? The algorithm used might need some improvement but overall it looks really awesome!

    1. Martin Angelov says:

      Thank you! Yes it could use some improvements. Maybe going with a different plugin might have been a better decision.

  20. Will S says:

    Very cool. My site doesn't require a password but maybe for a client in the future I can give this a shot.

  21. Boshigt says:

    Nice, I love it. Thank you ...

  22. Shibly says:

    Martin Angelov, you are an awesome dude. Love your work and tutorial very much :)

  23. Giovanni says:

    Fantastic and handsome! I'm using it to create a questionnaire that pepole can edit using their password.

    I like the style too so i whould like to use the same style to the questionnaire page. May I have the form_bg psd?

  24. Aprajita says:

    Its really nice and you look really cute..

  25. Robert says:

    Hi Martin,
    Yup, it does look really, beautiful! To make it even more gorgeous, I hit upon an idea. Why not make the orange bars (within the meter) even more glossy, with white fading gradient? That will add the "shiny" look and enhance its appeal even more.

    Great tutorial by the way!

  26. BIBi says:

    It's very very nice form. Thanks very much.

  27. dadada says:

    Cool ,very nice design....

  28. Sitebee says:

    Oh wow, that`s beautiful. great work indeed.

  29. Andreas says:

    Very nice, thank you!

  30. Nick says:

    Make sure you guys add the autocomplete="off" parameter to the form, or the yellow Chrome box will mess the style up!

  31. sohaan says:

    Great job Martin i really love this plugin but 1 thing which i think would make this plugin really interesting would be to move the needle all the way to end when password field gets the focus like we see in cars & bikes when we key in the ignition the speedometer pointer goes all the way to end please tell me how can i get this effect
    thanks.

  32. gmornob says:

    oh that's great tutorial

  33. ducsu says:

    I am trying to incorporate this sign up form into a password script. However, instead of using an email address, I am using all letters only, excluding special characters. Thus, I need to change the email validation to check for any special characters. Can someone show me how to write this up in the .js file?

    1. ducsu says:

      I managed to get it working on my site. I noticed when loading on a smartphone(iphone), the arrow & button is not in the center of the meter, It views fine on a pc. Anyone knows how I can fix this?

  34. Al says:

    Really great tutorial. Can't seem to locate the PSD. Thanks!!!

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links