jQuery Password Strength Meter with Bootstrap

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	password-strength-meter
Author:	Òscar Casajuana
Licence:	MIT Licence
Published:	January 19, 2024
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

Demo Download

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”.

$('#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",
});

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

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

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

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

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

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

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

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.