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/hs.pwstrength.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
                        $('.js-pwstrength').each(function () {
                          var pwstrength = $.HSCore.components.HSPWStrength.init($(this));
                        });
                      });
                    </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="input-label">
                                  New password
                                </label>

                                <div class="form-group">
                                  <input id="passwordStrength" type="password" class="js-pwstrength form-control" name="passwordStrength" placeholder="Enter your password" aria-label="Enter your password"
                                           data-hs-pwstrength-options='{
                                             "ui": {
                                               "container": "#changePasswordForm",
                                               "viewports": {
                                                 "progress": "#passwordStrengthProgress",
                                                 "verdict": "#passwordStrengthVerdict"
                                               },
                                               "progressExtraCssClasses": "bg-white h-4rem"
                                             }
                                           }'>
                                </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

Extend

Plugin methods are called using a wrapper:

                  
                    <script>
                      $(document).on('ready', function () {
                        // initialization of password strength
                        $('.js-pwstrength').each(function () {
                          var pwstrength = $.HSCore.components.HSPWStrength.init($(this));

                          $.HSCore.components.HSPWStrength.methods($(this), "destroy"); // matches $(this).pwstrength("destroy");
                        });
                    </script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

                  
                    data-hs-pwstrength-options='{
                    ...
                  }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-pwstrength-options='{}'. For more detailed or missing attributes/functions, see the official jQuery Password Strength documentation documentation page.

Contact Us