In this example we use an on-click event to access the strong password object (sp) internal strength counter. This is easily accessible, so it can be coded to check as part of a form validation. This interopability, provides additional features, if so desired.

CSS Code Sample:

  1. .wdStrengthHint {  }
  2. .wdStrongPassword {color: green; background-color: #999;}
  3. .wdIntermediatePassword { color: yellow; background-color: #999;}
  4. .wdWeakPassword {color: red; background-color: #999; }
  5. .wdTooWeakPassword {color: red; background-color: #322 }

JavaScript Code Sample:

This section of JavaScript is used to configure and initialize the Strong Password library tool.

  1. sp = null;
  2. function init() {
  3.     sp = new StrongPassword({allowSpecialChars: true});
  4. }

JavaScript onclick Event

Use this section of JavaScript on a button, or similar event based field to retrieve the strength of the password.

  1. <input type="button" onClick="$('#pwStren').val(sp.getPasswordStrength());" value="Get Password Strength">