Password Strength Meter jQuery Plugin

This lightweight jQuery plugin bind a progress bar that displays the strength meter of the entered password. It comes with multiple configuration options to create strength meter with custom error short, bad, good, and strong message. Likewise, you can also trigger custom events on different password lengths.

You can set the minimum length of the password and link the password input with other input fields. Moreover, this plugin also supports language translation for error messages. Similarly, you can also control the strength meter progress bar animation on input focus/blur.

You just need to include the plugin file into your project, then this plugin will start password strength visualization after initialization. So, you can install the plugin package by the following NPM or Bower commands.

NPM & Bower Installation

You can use the following NPM & Bower commands to install the “password-strength-meter” jQuery plugin.

# NPM
$ npm install password-strength-meter

# Bower
$ bower install password-strength-meter

How to Create a Password Strength Meter

In order to create a password strength meter, we need to getting started with jQuery JavaScript library and Bootstrap CSS (optional). So, load the jQuery by adding the CDN link inside the head tag of your HTML page.

<!-- Bootstrap 3 CSS (optional for styles only) -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- jQuery JS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

After that, create an HTML form element and define username, and password field with the following mentioned classes.

<form action="#"> 
           <fieldset>
                <legend>Linked to username input (password cannot contain field text)</legend>
                <div class="form-group">
                    <label for="username">
                        Username
                    </label>
                    <input id="username" type="text" placeholder="John Doe" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="linked">
                        Password
                    </label>
                    <input id="linked" type="password" class="form-control" />
                </div>
            </fieldset>
</form>

Finally, initialize the password plugin in the jQuery document ready function with the following configurations.

$(document).ready(function(){          
   $('#linked').password({
            field: '#username',
            showPercent: true
          });
});

Advanced Configuration Options

If you want to create an advanced password strength you can set the custom values for these plugin options. So, the following are some advanced configuration options to create/customize password strength meter.

$('selector').password({
	showPercent : true,
});

$('selector').password({
	showText : true,
});

$('selector').password({
	closestSelector : "div",
});

$('selector').password({
	animate : true,
});

$('selector').password({
	field : false,
});

$('selector').password({
	minimumLength : 4,
});

Custom Events

If you want to execute a custom function on different password length, you can use the JavaScript if condition just like below:

$('#events').password().on('password.score',function (e, score) {
  if (score > 75) {
    $('#submit').removeAttr('disabled');
  }else {
    $('#submit').attr('disabled',true);
  }
});

Similarly, you can run a custom function on text change.

$('#events').on('password.text', (e, text, score) => {
  console.log('Called every time the text is changed')
  console.log('Current message is %s with a score of %d', text, score)
});

That’s all! I hope you find this tutorial helpful and able to create the password strength meter. If you need further help, you can ask your question by comment below. Thanks!