Javascript - Simple Password Strength Indicator

Question

I'm trying to create a simple password strength indicator with javascript by changing the value of the html5 progress element, but somethings wrong, can somebody point out the error here please? Console is showing zero errors and it must be something to do with change function not binding to the input with ID 'pwd'?

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
window.addEventListener('load', function() {
var password = document.getElementById("pwd");
  password.addEventListener('change', function() {

  // Reset if password length is zero
  if (password.length === 0) {
      document.getElementById("progresslabel").innerHTML = "";
      document.getElementById("progress").value = "0";
      return;
  }
  // Password requirements
  var match = new Array();
  match.push("[$@$!%*#?&]"); // Special Chars
  match.push("[A-Z]");      // Uppercase
  match.push("[0-9]");      // Numbers
  match.push("[a-z]");     // Lowercase

  // Check progress
  var prog = 0;
  for (var i = 0; i < match.length; i++) {
      if (new RegExp(match[i]).test(password)) {
          prog++;
      }
  }
    //Length must be at least 8 chars
  if(prog > 2 && password.length > 7){
    prog++;
  }
  // Display it
  var progress = "";
  var strength = "";
  switch (prog) {
      case 0:
      case 1:
      case 2:
          strength = "25%";
          progress = "25";
          break;
      case 3:
          strength = "50%";
          progress = "50";
          break;
      case 4:
          strength = "75%";
          progress = "75";
          break;
      case 5:
          strength = "100% - Password strength is good";
          progress = "100";
          break;
  }
  document.getElementById("progresslabel").innerHTML = strength;
  document.getElementById("progress").value = progress;

});
});
</script>
</head>
<body>
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100">70</progress>
<span id="progresslabel"></span></div>
</form>
</body>
</html>

What's wrong currently with your code? – Jack Bashford Dec 29 '18 at 03:42 — Jack Bashford, Dec 29 '18 at 03:42

score 4 · Answer 1 · answered Dec 29 '18 at 03:56

A few issues:

You should listen to the keyup method instead of the change event so that the strength is re-evaluated whenever the password changes (change only fires on blur)
password refers to pwd element but your code is treating it as the input value - I added a pwd variable in the function which is the password element's value
The character tests can be simplified - the reduce I used is functionally equivalent to your code

var password = document.getElementById("pwd");
password.addEventListener('keyup', function() {

  var pwd = password.value

  // Reset if password length is zero
  if (pwd.length === 0) {
    document.getElementById("progresslabel").innerHTML = "";
    document.getElementById("progress").value = "0";
    return;
  }

  // Check progress
  var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/]
    .reduce((memo, test) => memo + test.test(pwd), 0);

  // Length must be at least 8 chars
  if(prog > 2 && pwd.length > 7){
    prog++;
  }

  // Display it
  var progress = "";
  var strength = "";
  switch (prog) {
    case 0:
    case 1:
    case 2:
      strength = "25%";
      progress = "25";
      break;
    case 3:
      strength = "50%";
      progress = "50";
      break;
    case 4:
      strength = "75%";
      progress = "75";
      break;
    case 5:
      strength = "100% - Password strength is good";
      progress = "100";
      break;
  }
  document.getElementById("progresslabel").innerHTML = strength;
  document.getElementById("progress").value = progress;

});

<form>
  <div>
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">
    <progress id="progress" value="0" max="100">70</progress>
    <span id="progresslabel"></span>
  </div>
</form>

score 2 · Answer 2 · answered Dec 29 '18 at 06:20

  

jQuery.strength = function( element, password ) {
        var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
        var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
        var score = 0;

        if(password.length > 6){
            score++;
        }

        if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))){
            score++;
        }

        if(password.match(/\d+/)){
            score++;
        }

        if(password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){
            score++;
        }

        if (password.length > 10){
            score++;
        }

        element.removeClass( descClass[score-1] ).addClass( descClass[score] ).css( desc[score] );
    };

jQuery(function() {
  jQuery("#pwd").keyup(function() {
                    jQuery.strength(jQuery("#progress-bar"), jQuery(this).val());
                });
});

 

   form {
      max-width: 400px;
      padding: 2em;
      border:1px dashed #ddd
        
    }
    #pwd{
      border-radius:50px;
      padding: 10px 20px;
      border:2px solid #999;
    }
    *:focus {
      outline-style: none;
    }

    input {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 6px;
      border: 1px solid #ddd;
    }

    #progressBar {
      height: 20px;
      width: 100%;
      margin-top: 0.6em;
      border-radius:50px;
      border:2px solid #ddd
    }

    #progress-bar {
      width: 0%;
      height: 100%;
      transition: width 500ms linear;
      border-radius:50px;
      box-shadow:0px 1px 5px #555
    }

    .progress-bar-danger {
      background: #d00;
    }

    .progress-bar-warning {
      background: #f50;
    }

    .progress-bar-success {
      background: #080;
    }

   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h3> Password Strength Using JAVASCRIPT.</h3>
 <form name="passwordStrengthBox">
   <div class="passBox">
    <input type="text" id="pwd" autocomplete="off" placeholder="Enter Passwords">
    <div id="progressBar">
      <div id="progress-bar"></div>
    </div> 
  </div>  
 </form>

Eduardo Gonzalez · Answer 3 · 2018-12-31T09:30:58.867

var password = document.querySelector('#pwd');

password.onkeyup = function (event) {
  handleChange(password)
}

function handleChange(password) {
  var pwd = password.value

  var progresslabel = document.querySelector('#progresslabel')
  var progress = 0;
  var strength = '0';

  switch (pwd.length) {
    case 1:
      strength = '12.5%';
      progress = 12;
      break;
    case 2:
      strength = '25%';
      progress = 25;
      break;
    case 3:
      strength = '37.5%';
      progress = 37.5;
      break;
    case 4:
      strength = '50%';
      progress = 50;
      break;
    case 5:
      strength = '62.5%';
      progress = 62.5;
      break;
    case 6:
      strength = '75%';
      progress = 75;
      break;
    case 7:
      strength = '87.5%';
      progress = 87.5;
      break;
    case 8:
      strength = '100% - Password strength is good';
      progress = 100;
      break;
  }

  // Number, a CAPS, lowercaps and special character.
  let regexp = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
  if (regexp.test(pwd)) {
    // Display it
    progresslabel.innerHTML = strength;
    document.getElementById("progress").value = progress;
  } else {
    progresslabel.innerHTML = '1 Cap, 1 digit, 8 digits atleast.'
  }
}

<form>   
  <div> 
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">     
    <progress id="progress" value="0" max="100">70</progress>     
    <span id="progresslabel"></span>   
  </div> 
</form>

I think this is the right way to do it, using querySelector and keyup handler.

Javascript - Simple Password Strength Indicator

3 Answers3