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-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.
Previous Parallax
Next Range slider
Contact Us