jQuery Password Strength Meter with Bootstrap

A lightweight, cross-browser and multi functional jQuery password strength meter plugin with Bootstrap. It bind a progress bar just after the password input field that show strength status (too short, weak, medium, strong) with changing colors.

Moreover, you can fully configure it according to your needs with its available options. You can show password strength status with cool animations & emojis.

Plugin Overview

Plugin: password-strength-meter
Author: Òscar Casajuana
Licence: MIT Licence
Published: May 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 3.3.7
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 24.2 KB

How to Use jQuery Password Strength Meter

1. Load the Bootstrap and Password CSS file into your HTML document.

<!-- Boostrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- Password CSS -->
<link rel="stylesheet" href="css/password.css">

2. After loading CSS, create input element with a unique id & type password.

<input id="myPassword" type="password" class="form-control" />

2.1 Tip: You can put this input into any filed in HTML form, like:

<form action="#">
            <fieldset>
                <legend>Just the password input, with the progress shown since the very first moment</legend>
                <div class="form-group">
                    <label for="password">
                        Password
                    </label>
                    <input id="password" type="myPassword" class="form-control" />
                </div>
            </fieldset>
</form>

3. After that, load the jQuery and password JavaScript file in your webpage.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Password Js -->
<script src="js/password.js"></script>

4. Finally initialize the password strength plugin in jQuery document ready function with default settings.

$(document).ready(function(){

  $('#myPassword').password();

});

5. If you want to show emoji with password status, you need to load the emoji one JavaScript library into your website.

<!-- Emoji One Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/lib/js/emojione.min.js"></script>

6. The basic CSS styles to fit the inputs with the status & progress bar.

      label {
        display: block;
      }
      input {
        width: 300px;
      }
      .container {
        margin-top: 30px;
      }
      @media (min-width: 600px) {
        #main {
          width: 60%;
        }
      }
      .emojione {
        width: 20px;
        height: 20px;
      }

      /* better progress bar styles for the bootstrap demo */
      .pass-strength-visible input.form-control,
      input.form-control:focus {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

      .pass-strength-visible .pass-graybar,
      .pass-strength-visible .pass-colorbar,
      .form-control:focus + .pass-wrapper .pass-graybar,
      .form-control:focus + .pass-wrapper .pass-colorbar {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

Advance Configuration Options for Password Strength Meter

The following are some advance configuration options to create / customize “password strength meter”.

Option Description, Default, Type
shortPass , badPass ,
goodPass , containsField & strongPass

Define the status for short, bad, good, simlilar to other (name) input field and strong password respectively. Type: String.

$('#strength').password({
      shortPass: "The password is too short",
      badPass: "Weak; try combining letters & numbers",
      goodPass: "Medium; try using special characters",
      strongPass: "Strong password",
      containsField: "The password contains your username",
      enterPass: "Type your password",
});
showPercent

Decide weather to show percentage according to password strength. Default: false, Type: Boolean.

$('#strength').password({
   showPercent: true,
});
showText

Enable / disble text status. Default: true, Type: Boolean.

$('#strength').password({
     showText: true,
});
animate

Decide weather to animate progress bar. Default: true, Type: Boolean.

$('#strength').password({
  animate: true, 
});
animateSpeed

Define the speed (transition duration) for animation. Drfault: ‘fast’, Type: String.
Available Optuions Are: slow | fast

$('#strength').password({
   animateSpeed: 'fast',
});
field

Enable / diable fields for password. Default: false, Type: Boolean.

$('#strength').password({
    field: false,
});
fieldPartialMatch

Decide weather to match partial filed with password. Default: ture, Type: Boolean.

$('#strength').password({
   fieldPartialMatch: true,
});
minimumLength

Define the minimum length for password. Default: 4, Type: Number.

$('#strength').password({
   minimumLength: 6,
});
closestSelector

Define the nearest selector. Default: ‘div’, Type: String | Object.

$('#strength').password({
  closestSelector: 'div',
});