BootStrength: a Bootstrap styled javascript password strength meter

December 18, 2015 by richardvk

Filed under Web Development

Last modified January 31, 2018

A while back I had a requirement to not only give a visual indication of password strength, as a user was entering it in a standard HTLM form password input, but additionally I needed the ability to define what exactly was meant by ‘strength’.

For some requirements a minimum length and a combination of alpha-numerics might suffice, but for other requirements we might need to insist on the inclusion of special characters as well.

I started off by cloning the work of Aarond’s ‘Strength.js’ module. You can find it on Github (see demo here).

At the time of writing, the definition of strength was hardcoded in the code, and i wanted to change this. I also wanted a ‘help’ icon the user could click so they could actually see what was expected of them.

Lastly, my specific implementation was inside a Bootstrap styled website, so I decided to make use of some of Bootstraps features and styling built in.

The result is BootStrength.js. You can find it on Github and see a demo here.

The definition happens here:

var pluginName = "boot_strength",
 defaults = {
  strength_minlength: 8,
  strength_required_upper: 1,
  strength_required_lower: 1,
  strength_required_digits: 1,
  strength_required_special: 1,
 };

If you use 0, it means that that particular character type is not required. If its an integer >0, that will require said number of characters to be required.

To calculate the strength, we have a ‘required_strength’ value, which is a direct mathematical computation of the defined parameters. This means if you match them exactly, your password is considered ‘strong’. Should you meet none of the requirements, your password is ‘weak’ or even ‘very weak’. The closer you come to meeting all of the requirements, the strength will eventually progress to ‘medium’ and then ‘strong’.

I’m sure there is a lot more that can be done with this, but it was suitable for my requirements. For example, we could prevent form submission altogether if the minimum requirements are not met.

Finally, you will see an ‘info’ icon next to each text box which when clicked will show the user what the minimum strength requirements are. Neat!

Related Articles

                          Leave a Comment