Password Strength

jQuery Password Strength Meter.

Official documentation

For more detailed information and examples, see the official documentation: jQuery Password Strength documentation .

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/js/components/hs.password-strength.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of password strength module
    $.HSCore.components.HSPasswordStrength.init('#newPassword');
  });
</script>
Copy

Basic example

Password strength:

New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).

<form id="changePasswordForm" class="js-validate">
  <!-- Input -->
  <div class="mb-6">
    <div class="js-form-message">
      <label class="form-label">
        New password
      </label>

      <div class="form-group">
        <input id="newPassword" type="password" class="form-control" name="newPassword" placeholder="Enter your password" aria-label="Enter your password" required
             data-msg="Please enter your password."
             data-error-class="u-has-error"
             data-success-class="u-has-success"
             data-pwstrength-container="#changePasswordForm"
             data-pwstrength-progress="#passwordStrengthProgress"
             data-pwstrength-verdict="#passwordStrengthVerdict"
             data-pwstrength-progress-extra-classes="bg-white height-4">
      </div>
    </div>
  </div>
  <!-- End Input -->

  <div class="w-lg-50">
    <!-- Password Strength -->
    <div class="mb-6">
      <div class="d-flex justify-content-between mb-2">
        <h3 class="h6">Password strength:</h3>
        <span id="passwordStrengthVerdict"></span>
      </div>

      <div id="passwordStrengthProgress" class="mb-2"></div>

      <p class="small">New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).</p>
    </div>
    <!-- End Password Strength -->

    <!-- Buttons -->
    <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Password</button>
    <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
    <!-- End Buttons -->
  </div>
</form>
Copy

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-pwstrength-container="".

Attribute Description

data-pwstrength-container

 Container in which the progress bar and the field being checked are located (must be shared).

data-pwstrength-verdict

 ID of the item to generate the current password quality.

data-pwstrength-progress

 ID of the element in which the progress bar will be generated.

data-pwstrength-progress-extra-classes

 Additional classes, that are added to the .progress generated progress bar.
Previous Parallax
Next Range slider
Contact Us