Realtime Password Confimation & Strength Checker for sign ups

To make your UI a little more friendly and helpful for your users, I have added some code here to show the strength of a password and then confirmation it matches.

First up when you start writing your password the indicator tells you the strength, showing Weak, Medium or Strong

Then you have your confirmation checker showing you then if the confirmation password matches or not

There is nothing you need to add in the builder or add/change the code so just a copy & paste job. This is only applied to the register pages.

Javascript

$(document).on('knack-view-render.any', function() {
  $('div.kn-register .kn-input-password').append('<div id="password-match"></div><div id="password-strength-container"><div id="password-strength"><div id="password-strength-bar"></div></div><div id="password-strength-text"></div></div>') 
  $('div.kn-register input[name="password"]').on('keyup', function() {
    var password = $(this).val();
    var strength = checkPasswordStrength(password);
    var strengthText = '';

    switch (strength) {
      case 'weak':
        strengthText = 'Weak';
        $('#password-strength-bar, #password-strength-text').removeClass().addClass('weak');
        break;
      case 'medium':
        strengthText = 'Medium';
        $('#password-strength-bar ,#password-strength-text').removeClass().addClass('medium');
        break;
      case 'strong':
        strengthText = 'Strong';
        $('#password-strength-bar ,#password-strength-text').removeClass().addClass('strong');
        break;
    }
    $('#password-strength-text').text(strengthText);
  });

  $('div.kn-register input[name="password_confirmation"], div.kn-register input[name="password"]').on('keyup', function() {
    var password = $('div.kn-register input[name="password"]').val();
    var confirmPassword = $('div.kn-register input[name="password_confirmation"]').val();

    if (confirmPassword === '') {
      $('#password-match').slideUp(500);
      return;
    }

    if (password !== confirmPassword) {

      $('#password-match').removeClass().addClass('password-mismatch').text('❌ Passwords do not match').slideDown(500);
    } else {
      $('#password-match').removeClass().addClass('password-match').text('✅ Passwords match').slideDown(500);
    }
  });
});

function checkPasswordStrength(password) {
  var strength = 0;

  if (password.length < 8) {
    return 'weak';
  }

  if (password.length >= 8) {
    strength += 1;
  }

  if (password.match(/[a-z]+/)) {
    strength += 1;
  }

  if (password.match(/[A-Z]+/)) {
    strength += 1;
  }

  if (password.match(/[0-9]+/)) {
    strength += 1;
  }

  if (password.match(/[$@#&!]+/)) {
    strength += 1;
  }

  if (strength < 3) {
    return 'weak';
  }

  if (strength === 3) {
    return 'medium';
  }

  return 'strong';
}


CSS


#password-strength-container {
  display: flex;
  align-items: center;
}

#password-strength {
    height: 10px;
    background-color: #ddd;
    border-radius: 1em;
    overflow: auto;
    width: 60%;
}

#password-strength-bar {
  height: 100%;
  transition: width 0.2s ease-in-out;
}

#password-strength-bar.weak {
  background-color: #dc3545;
  width:33%;
}

#password-strength-text.weak {
  color: #dc3545;
}

#password-strength-bar.medium {
  background-color: #ffc107;
  width:66%;
}

#password-strength-text.medium  {
  color: orange;
}

#password-strength-bar.strong {
  background-color: #28a745;
  width:100%;
}

#password-strength-text.strong  {
  color: #28a745;
}

#password-strength-text {
  font-weight:bold;
  padding: 0px 15px;
}```
1 Like

You’re on fire @Johnny_Appknowledged_UK thanks again.

Where a register page is for a specific account type the form id is linked to the Account object number, so to make this great code work swapping all references of #register_all_users to div.kn-register gets the registration form selector correctly for me - might work in all user type scenarios too.

1 Like

An aside question @Johnny_Appknowledged_UK that might be a dumb one - how did you enter the symbols used int he JS code here? (The tick and cross)

1 Like

Thanks @BradStevens

Ah I didn’t see know that see I just fired up a test account and assumed it applied 1 ID to all. Looking back not quite sure why I didn’t use .kn-register. I’ll update the code to make it easier for people.

@BradStevens they are just text icons can find them most places but you can find them with emoji’s here

@Johnny_Appknowledged_UK Nice one, Johnny. Have you thought about extracting the password criteria from the Knack object e.g. “must contain numbers” etc to make the validation criteria dynamic?

1 Like

Thanks @KnackPros I didn’t think to include anything more as further stuff like this can be handled in the builder.