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