Password Strength

jQuery Password Strength Meter.

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

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>

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.