Edit in JSFiddle

  Include the password control JS somewhere on your page, 
  then add the pp-enable attribute to your password input element
<script type="text/javascript" src="https://cdn.passwordping.com/js/passwordping.min.js"></script>

<h4 class="text-center">
  Example Signup Form Using PasswordPing
<p class="text-center offset-1">
Highlight the "Choose a Password" field to see the Password Strength Meter in action.
<form id="signupForm" action="https://cdn.passwordping.com/demosignupsuccess.html" class="offset-4 demo-form pp-container text-center">
    <div class="row">
      <div class="col-md-12">
        <input type="text" placeholder="Your Email Address" />
    <div class="row">
      <div class="col-md-6">
        <!-- to add PasswordPing to this input, add the pp-enable attribute to the markup -->
        <input type="password" name="password" placeholder="Choose a Password"
          pp-enable pp-theme="default" pp-min-password-strength="4" 
          pp-css-success-class="pp-success" pp-css-fail-class="pp-fail" />
      <div class="col-md-6">
        <input type="password" placeholder="Confirm Password" />
    <div class="btn-group text-center">
      <button type="submit" class="btn btn-md btn-primary">Test Submit</button>
      <p class="offset-1 small">
        This is an example to show the Password Strength Meter in action.<br/>You're not signing up for an account.
    <div id="resultToast" class="result-toast">
      <span class="loader"></span>
      <span id="resultToastMsg" class="msg">...</span>
/* handler for the signup form's onsubmit event */
function onSignupFormSubmit() {
    Decide what your minimum allowable password score is and disallow if less.
    You can check the current score using the CurrentPasswordScore property.
  if (PasswordPing.currentPasswordScore < PasswordPing.PASSWORD_STRENGTH.Strong) {
    showToast('Entered password is not strong enough.');
    return false;

  return true;

function showToast(msg) {
  var toastEl = document.getElementById('resultToast');
  var toastMsg = document.getElementById('resultToastMsg');
  toastMsg.innerHTML = msg;
  toastEl.className += ' fail';

  // hide toast
  setTimeout(hideToast, 2000);

function hideToast() {
  var toastEl = document.getElementById('resultToast');

  toastEl.className =
    toastEl.className.replace('fail', '');

document.getElementById('signupForm').onsubmit = onSignupFormSubmit;
   example usage of the PasswordPing CSS classes to show visual 
   indicators for password acceptability.  The pp-success and pp-fail 
   CSS classes get added automatically to the password input control when a 
   password is classified by PasswordPing.  See the documentation for more details.

input.pp-fail {
  border-color: #b94a48 !important;
  background: url(https://cdn.passwordping.com/images/warning.png) right 5px center no-repeat;

input.pp-success {
  border-color: #32cd32 !important;