Quick Start

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

1. Include the Enzoic JS Library

Add the following script include before your closing body tag:

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

2. Enable Enzoic on Your Password Input Control

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

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

Alternatively, you can call the applyToInputElement function:

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

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

3. Modify 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 (Enzoic.currentPasswordScore <
          Enzoic.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 Enzoic frame around it when it is focused.