Password Strength Meter Quick Start


Adding the PasswordPing Password Strength Meter to your existing signup or password change form is simple.

1Include the PasswordPing JS Library

Add the following script include before your closing body tag:

<script async type="text/javascript" 
            src="https://cdn.passwordping.com/js/passwordping.min.js" />

2Enable PasswordPing on Your Password Input Control

Add the “pp-enable” attribute to your signup form’s password input element:

<input type="password" pp-enable />

Alternatively, you can call the applyToInputElement function:

<script type="text/javascript">
    var passwordEl = document.getElementById('id_of_your_password_input');
    PasswordPing.applyToInputElement(passwordEl);
</script>

Delete any existing password strength meter from the page, as you will no longer need it.

3Modify Your Form Validation Logic

Add in code to prevent the user from submitting the form if the password strength is insufficient. The mechanism for alerting the user will be specific to your page, but a basic code snippet in JavaScript for this is below:

  // typically this is the onsubmit event handler for your signup form
 function formSubmit() {
 
      // check if the current password meets your desired
      // strength score (strong in this case)
      if (PasswordPing.currentPasswordStrength <
          PasswordPing.PASSWORD_STRENGTH.Strong) {
 
          // password is not strong enough, do something
          // here to indicate to the user that they must
          // improve their password's strength before they
          // can move on
 
      }
}

That's it!

You're done! When you reload the page, your password input will now have the PasswordPing frame around it when it is focused.