Home » Tutorials » JavaScript » How To Create jQuery Password Strength Indicator in 10 Minutes!

How To Create jQuery Password Strength Indicator in 10 Minutes!

How To Create jQuery Password Strength Indicator in 10 Minutes!

  • Stumble it!
  • Share

If you building a web system that allows users to enter their own password, then it is always a good idea to give them an instant feedback regarding the strength of their password, so the user can modify the password to make it more secure.

Today, we are going to use jQuery plus some simple algorithm to create a beautiful combo password strength indicator + password tips checker. Sound nice? Let’s get started right away!

screenshot of jquery password indicator

View jQuery Password Indicator demo

HTML

The HTML markup looks like below:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create jQuery Password Strength Indicator Within 10 Minutes! | onlyWebPro.com</title>
</head>
<body>
<form>
	<p><label>Type your password:</label></p>
	<input type="password" id="pwd" />
	<div id="pwd_strength_wrap">
		<div id="passwordDescription">Password not entered</div>
		<div id="passwordStrength" class="strength0"></div>
		<div id="pswd_info">
			<strong>Strong Password Tips:</strong>
			<ul>
				<li class="invalid" id="length">At least 6 characters</li>
				<li class="invalid" id="pnum">At least one number</li>
				<li class="invalid" id="capital">At least one lowercase &amp; one uppercase letter</li>
				<li class="invalid" id="spchar">At least one special character</li>
			</ul>
		</div><!-- END pswd_info -->
	</div><!-- END pwd_strength_wrap -->
</form>
</body>
</html>

Please do notice on few elements as shown above. The input element with an ID of pwd, the div element with an ID of pwd_strength_wrap which contains the password feedback message, password strength indicator and password tips.

CSS Styling

<style>
input#pwd {
	width:180px; 
	padding:3px;
	color: #000;
	float:left;
	margin-right:10px;
}
#pwd_strength_wrap {
	border: 1px solid #D5CEC8;
	display: none;
	float: left;
	padding: 10px;
	position: relative;
	width: 320px;
}
#pwd_strength_wrap:before, #pwd_strength_wrap:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent; /* arrow size */
}
#pwd_strength_wrap:before {
    border-bottom: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0.1);
    border-top: 7px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: -18px;
    position: absolute;
    top: 10px;
}
#pwd_strength_wrap:after {
	border-bottom: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid #fff;
    border-top: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: -16px;
    position: absolute;
    top: 11px;
}
#pswd_info ul {
	list-style-type: none;
	margin: 5px 0 0;
	padding: 0;
}
#pswd_info ul li {
	background: url(icon_pwd_strength.png) no-repeat left 2px;
	padding: 0 0 0 20px;
}
#pswd_info ul li.valid {
	background-position: left -42px;
	color: green;
}
#passwordStrength {
    display: block;
    height: 5px;
    margin-bottom: 10px;
    transition: all 0.4s ease;
}
.strength0 {
    background: none; /* too short */
    width: 0px;
}
.strength1 {
    background: none repeat scroll 0 0 #FF4545;/* weak */
    width: 25px;
}
.strength2 {
    background: none repeat scroll 0 0 #FFC824;/* good */
    width: 75px;
}
.strength3 {
	background: none repeat scroll 0 0 #6699CC;/* strong */
    width: 100px;
}

.strength4 {
	background: none repeat scroll 0 0 #008000;/* best */
    width: 150px;
}
</style>

It’s just a CSS styles to make the strength indicator and tips checkers displays as a dialog. Do notice the strength0, strength1, strength2, strength3, strength4, these are the class that control the strength indicator length and color. The pswd_info ul li.valid used to update the color of the password tips checklist.

jQuery Implementation

We already have the HTML structure and some styling in place, we can start constructing the functionality. Do notice that we are going to use jQuery library for the functionality, please link to Google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Constructing The Event Handler

First, we bind 3 mouse & keys events to the password input field, to check when users focus on the input field, and when the field loses focus.

<script>
$("input#pwd").on("focus keyup", function () {
	
});

$("input#pwd").blur(function () {
	
});
</script>

Variables

Since there is a lot analyzing functions is going to go on, we need some variables to hold the values for us.

<script>
$("input#pwd").on("focus keyup", function () {
	var score = 0;
	var a = $(this).val();
	var desc = new Array();

	// strength desc
	desc[0] = "Too short";
    desc[1] = "Weak";
    desc[2] = "Good";
    desc[3] = "Strong";
    desc[4] = "Best";
	
});

$("input#pwd").blur(function () {

});
</script>

Variable with name score holds the password strength’s value. a holds the value of the password input field, and desc is an array holds the feedback message of the password strength.

The Logic

<script>
$("input#pwd").on("focus keyup", function () {
	var score = 0;
	var a = $(this).val();
	var desc = new Array();

	// strength desc
	desc[0] = "Too short";
	desc[1] = "Weak";
	desc[2] = "Good";
	desc[3] = "Strong";
	desc[4] = "Best";
	
	// password length
	if (a.length >= 6) {
	    $("#length").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#length").removeClass("valid").addClass("invalid");
	}

	// at least 1 digit in password
	if (a.match(/\d/)) {
	    $("#pnum").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#pnum").removeClass("valid").addClass("invalid");
	}

	// at least 1 capital & lower letter in password
	if (a.match(/[A-Z]/) && a.match(/[a-z]/)) {
	    $("#capital").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#capital").removeClass("valid").addClass("invalid");
	}

	// at least 1 special character in password {
	if ( a.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) {
		$("#spchar").removeClass("invalid").addClass("valid");
		score++;
	} else {
		$("#spchar").removeClass("valid").addClass("invalid");
	}


	if(a.length > 0) {
		//show strength text
		$("#passwordDescription").text(desc[score]);
		// show indicator
		$("#passwordStrength").removeClass().addClass("strength"+score);
	} else {
		$("#passwordDescription").text("Password not entered");
		$("#passwordStrength").removeClass().addClass("strength"+score);
	}
});

$("input#pwd").blur(function () {

});
</script>

This may looks a bit complicated, but no worry, let me explain it! We use regular expression + jquery .match() function to figure out whether the password input field value contains lower case, upper case, number, or any symbols. If you are new to regular expression, I suggest you to read W3School article here. And here is a cheat sheet of regular expression, you can take a look if you have no idea wha is “/[A-Z]/” or “/\d/” means.

Do notice that we increase 1 to the variable score and add valid class to the tips checklist accordingly if the input value length has at least 6 characters, at least 1 digit, 1 upper case, 1 lower case and 1 special characters.

As the score increases, we change the feedback message accordingly and add the necessary class such as (strength1, strength2, strength3, strength4) to the strength indicator.

Visibility of the Password Strength Indicator & Password Tips Checker

Now, you have a solid functionality to the password strength indicator & password tips checker, let’s show it when user has mouse click on the input field / on key up and hide it when the input field loses focus.

<script>
$("input#pwd").on("focus keyup", function () {
	var score = 0;
	var a = $(this).val();
	var desc = new Array();

	// strength desc
	desc[0] = "Too short";
	desc[1] = "Weak";
	desc[2] = "Good";
	desc[3] = "Strong";
	desc[4] = "Best";

	$("#pwd_strength_wrap").fadeIn(400);
	
	// password length
	if (a.length >= 6) {
	    $("#length").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#length").removeClass("valid").addClass("invalid");
	}

	// at least 1 digit in password
	if (a.match(/\d/)) {
	    $("#pnum").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#pnum").removeClass("valid").addClass("invalid");
	}

	// at least 1 capital & lower letter in password
	if (a.match(/[A-Z]/) && a.match(/[a-z]/)) {
	    $("#capital").removeClass("invalid").addClass("valid");
	    score++;
	} else {
	    $("#capital").removeClass("valid").addClass("invalid");
	}

	// at least 1 special character in password {
	if ( a.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) {
		$("#spchar").removeClass("invalid").addClass("valid");
		score++;
	} else {
		$("#spchar").removeClass("valid").addClass("invalid");
	}


	if(a.length > 0) {
		//show strength text
		$("#passwordDescription").text(desc[score]);
		// show indicator
		$("#passwordStrength").removeClass().addClass("strength"+score);
	} else {
		$("#passwordDescription").text("Password not entered");
		$("#passwordStrength").removeClass().addClass("strength"+score);
	}
});

$("input#pwd").blur(function () {
	$("#pwd_strength_wrap").fadeOut(400);
});
</script>

View jQuery Password Indicator demo

Conclusion

You’ve just added a great functionality to let your users know the strength of the password they just entered, and the tips of creating strong password to your projects. I do hope you guys found this tutorial interesting and you are feel free to re-use this code to any of your web projects. Any improvement? question? Please share at the comment section!


  • Create jQuery Responsive Content Slider For Mobile In 5 Minutes!
  • Enhancing Google Map Interactivity with jQuery
  • Make A jQuery Sticky Header In 5 Minutes

Android, iOS Development Tutorials