JQuery Password Strength Indicator Plugin For Bootstrap 4

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. The primary features of Password Strength Indicator Plugin:

  • Helps in the computation of the cryptographic password strength.
  • This plugin also controls the minimum number of letters, numbers, and alternating case letters in a password.
  • It guides the users while creating the password.
  • Displays an estimate of passwords cracking time on modern hardware.
  • It provides custom hint text for – weak, strong, very strong, and success.
  • You can decide the amount of special and different characters.
  • Display the amount of lower and uppercase characters.
  • Also, you can decide the amount of the number of digits.

Live Demo

How to Use

Add the css below to your html page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/signin.css" rel="stylesheet">

Create a container where you want to render Password Strength Indicator

<form class="form-signin">
    <h2 class="form-signin-heading">Password Indicator</h2>
    <div class="form-group">
        <label for="password" class="sr-only">Password</label>
        <input type="password" id="password" class="form-control" placeholder="Password" autofocus>
    </div>
    <h4>Normal</h4>
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated jak_pstrength" role="progressbar"
            style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <hr>
    <h4>Thinner</h4>
    <div class="progress">
        <div class="progress-bar jak_pstrength" role="progressbar" style="width: 0%; height: 1px;" aria-valuenow="0"
            aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <hr>
    <h4>Text</h4>
    <p id="jak_pstrength_text" class="text-center"></p>
</form>

Load jQuery library together with the Password Strength Indicator library into your code

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="js/jaktutorial.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#password").keyup(function () {
            passwordStrength(jQuery(this).val());
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.