Password Strength checker with jQuery Complexify

The main aim of the jQuery Complexify plugin is to measure how complex is the user-entered password and show the live feedback in the form of strength bars.

In this tutorial, I am using the jQuery UI Progressbar widget to display the password strength according to the user input.

---

Contents

1. Download and include
2. Initialize
3. Options
4. Conclusion

---

1. Download and include

• You can download this plugin from GitHub.
• Include jQuery library and plugin scripts.

Note – List of all banned passwords is defined in jquery.complexify.banlist.js.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Complexify -->
<script src="jquery.complexify.js/jquery.complexify.banlist.js" type="text/javascript"></script>
<script src="jquery.complexify.js/jquery.complexify.js" type="text/javascript"></script>

• Include jQuery UI.

<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Note – Here, I include jQuery UI to show entered password strength in Progressbar widget.

---

2. Initialize

Call complexify() method on the password element.

Syntax –

$( selector ).complexify( { [options] }, function(valid, complexity){
  console.log(" Complexity : " + complexity + " , valid : " + valid);
});

The complexify() method has two arguments –

Options – Specify options within curly braces {} to customize the default values. Set it empty {} if you don’t want any change.

Function – This is a callback function that will be called with the results of the validation. It has two arguments –

• valid – It has a Boolean value (true/false) that represents whether the password met the minimum complexity requirements.
• complexity – This has a numeric value that use to show strength. The value is between 0 to 100.

Completed Code

<!-- CSS -->
<style>
.txt{
 width: 193px;
 padding: 5px 3px;
 margin-bottom: 5px;
}
#progressbar{
 width: 200px;
 height: 25px;
}
</style>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 // Initialize Progressbar
 $("#progressbar").progressbar({value: 0});

 // Initialize complexify
 $("#password").complexify({}, 
  function (valid, complexity) { //show de password level
   // Show percentage
   $('#per').text(Math.round(complexity));
   // Initialize Progressbar
   $( "#progressbar" ).progressbar({
    value: complexity
   });
  }
 );

});

</script>
 
<!-- Layout -->
<input type='password' id='password' placeholder='Enter password' class='txt' >
<div id="progressbar"></div><span id='per'>0</span>%

Output

Enter your password.

---

3. Options

There are few options to customize the default complexity behavior –

• bannedPasswords – With this, you can either specify your own list of banned password or you can use the global COMPLEXIFY_BANLIST variable ( The variable is defined in jquery.complexify.banlist.js ). It will return 0 when the entered value finds in the list.

Example

$( "#password" ).complexify( { bannedPassword:['vishal','jiten'] }, function(valid, complexity){
 console.log(" Complexity : " + complexity + " , valid : " + valid);
});

• minimumChars – The default value is 8. You can change it to any other value. e.g. minimumChars: 10
• banMode – This will take either strict or loose value. The default value is strict.
  • strict – The password will fail whether a sub-string or whole string find in the entered value.
  • loose – It will fail the password when it finds the exact value.

NOTE – If bannedPasswords options is defined then banMode will only search the value within the specified list.

Example

<!-- CSS -->
<style>
.txt{
 width: 193px;
 padding: 5px 3px;
 margin-bottom: 5px;
}
#progressbar{
 width: 200px;
 height: 25px;
}
</style>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){

 // Initialize Progressbar
 $("#progressbar").progressbar({value: 0});

 // Initialize complexify
 $("#password").complexify({
  bannedPasswords:['yogesh','vishal','anil'],
  minimumChars:10,
  banMode: 'strict'
  }, 
  function (valid, complexity) { //show de password level 
   // Show percentage
   $('#per').text(Math.round(complexity));
   // Initialize Progressbar
   $( "#progressbar" ).progressbar({
    value: complexity
   });
  }
 );

});

</script>
 
<!-- Layout -->
<input type='password' id='password' placeholder='Enter password' class='txt' >
<div id="progressbar"></div><span id='per'>0</span>%

Output

Use specified values bannedPasswords: ['yogesh','vishal','anil'] to make your password. e.g.  testvishal.

---

4. Conclusion

With jQuery complexify, you can show How secure the user entered password? On the basis of the strength result, the user will try to choose a stronger password for its account that cannot easily be broken.

You can use any other plugin in the place of jQuery UI or make a custom layout to display the password strength.

If you found this tutorial helpful then don't forget to share.