How to Create a Password Strength Meter using jQuery

Submitted by nurhodelta_17 on Wednesday, April 25, 2018 - 22:01.

Getting Started

First we need Bootstrap 4 and jQuery. These are included in the downloadable of this tutorial but if you want, you can download them yourself using the links below. For Bootstrap 4 For jQuery 3.3.1

Creating our Form

Next, we create the form which contains our password field. Create a new file, name it as index.html and paste the codes below. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>How to Create a Password Strength Meter using jQuery</title>
  6. 	<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  7. 	<link rel="stylesheet" type="text/css" href="assets/strength.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. 	<h1 class="text-center" style="margin-top:30px;">Password Strength Meter using jQuery</h1>
  12. 	<hr>
  13. 	<div class="row justify-content-center">
  14. 		<div class="col-sm-4">
  15. 			<div class="form-group">
  16. 				<label for="password">Password</label>
  17. 				<input type="password" name="password" id="password" class="form-control" placeholder="input Password">
  18. 			</div>
  19. 			<div class="progress">
  20. 			  	<div id="progress" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  21. 			</div>
  22. 			<span id="strength"></span>
  23. 		</div>
  24. 	</div>
  25. </div>
  26.  
  27. <script src="jquery/jquery.min.js"></script>
  28. <script src="assets/strength.js"></script>
  29. </body>
  30. </html>

Creating our CSS

Next, we create our custom CSS for the strength of our password. Create a new file, name it as strength.css and paste the codes below. 
  1. .short{
  2. 	color:#d9534f;
  3. }
  4. .weak{
  5. 	color:#5bc0de;
  6. }
  7. .good{
  8. 	color:#428bca;
  9. }
  10. .strong{
  11. 	color:#5cb85c;	
  12. }
  13. #strength{
  14. 	font-weight:bold;
  15. 	font-size:larger;
  16. }

Creating our jQuery Scripts

Lastly, we create our jquery scripts that contains our code that checks the strength of the inputted password. Create a new file, name it as strength.js and paste the codes below. 
  1. $(function(){
  2. 	$('#password').keyup(function(){
  3. 		var password = $('#password').val();
  4. 		if(password == ''){
  5. 			$('#progress').removeClass().addClass('progress-bar');
  6. 			$('#strength').html('');
  7. 		}
  8. 		else{
  9. 			var meter = checkStrength(password);
  10. 			$('#strength').html(meter);
  11. 		}
  12.  
  13. 	});
  14. });
  15.  
  16. function checkStrength(password){
  17. 	var strength = 0
  18. 	if (password.length < 6) {
  19. 		$('#progress').removeClass().addClass('progress-bar').addClass('w-25').addClass('bg-danger');
  20. 		$('#strength').removeClass().addClass('short');
  21. 		return 'Too short';
  22. 	}
  23. 	if (password.length > 7) strength += 1
  24. 	// If password contains both lower and uppercase characters, increase strength value.
  25. 	if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
  26. 	// If it has numbers and characters, increase strength value.
  27. 	if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
  28. 	// If it has one special character, increase strength value.
  29. 	if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
  30. 	// If it has two special characters, increase strength value.
  31. 	if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
  32. 	// Calculated strength value, we can return messages
  33. 	// If value is less than 2
  34. 	if (strength < 2){
  35. 		$('#progress').removeClass().addClass('progress-bar').addClass('w-50').addClass('bg-info');
  36. 		$('#strength').removeClass().addClass('weak');
  37. 		return 'Weak';
  38. 	} 
  39. 	else if (strength == 2){
  40. 		$('#progress').removeClass().addClass('progress-bar').addClass('w-75').addClass('bg-primary');
  41. 		$('#strength').removeClass().addClass('good');
  42. 		return 'Good';
  43. 	} 
  44. 	else{
  45. 		$('#progress').removeClass().addClass('progress-bar').addClass('w-100').addClass('bg-success');
  46. 		$('#strength').removeClass().addClass('strong');
  47. 		return 'Strong';
  48. 	}
  49.  
  50. }
Our app's file structure should look like this: file structure for password strength That ends this tutorial. Happy Coding :)

Tags

Comments

Submitted byVitruveusMan (not verified)on Sat, 11/21/2020 - 03:00

It looks like there is some missing code in your function 'checkStrength'. The following line is wrong:
if (password.length $('#progress').removeClass().addClass('progress-bar').addClass('w-25').addClass('bg-danger');
It should be something like: if (password.length $('#progress').removeClass().addClass('progress-bar').addClass('w-25').addClass('bg-danger'); In other words, it looks like some of your code went missing when you pasted, your 'if-statement' is missing some code.

Add new comment

About text formats