Password Strength Issue

Question

I have written a code for form validation and password strength checker. This form will only go through if it completes the certain requirements. I am able to successfully validate the form but having issue on showing password strength. It's not updating the color of the bar after i type the strong or weak password. Here's the complete code snippet to understand my complete code.

<!DOCTYPE html>
<html>
<head>

<style>
  .strength-bar {
        width: 100%;
        height: 30px;
        background-color: lightgrey;
        border: 1px solid black;
        margin: 10px 0;
      }

      /* CSS for the strength meter */
      .strength-meter {
        height: 100%;
        background-color: green;
        transition: width 0.5s;
      }

      /* CSS for a weak password */
      .weak {
        width: 33%;
        background-color: red;
      }

      /* CSS for a strong password */
      .strong {
        width: 66%;
        background-color: orange;
      }
</style>



<script>
function validateForm() {
  var password = document.forms["myForm"]["password"].value;
  
  // Check if password contains at least one lowercase letter
  if (!password.match(/[a-z]/)) {
    alert("Error: Password must contain at least one lowercase letter!");
    return false;
  }
  
  // Check if password contains at least one uppercase letter
  if (!password.match(/[A-Z]/)) {
    alert("Error: Password must contain at least one uppercase letter!");
    return false;
  }
  
  // Check if password contains at least one number
  if (!password.match(/[0-9]/)) {
    alert("Error: Password must contain at least one number!");
    return false;
  }
  
  // Check if password is at least 8 characters long
  if (password.length < 8) {
    alert("Error: Password must be at least 8 characters long!");
    return false;
  }
  
  // If all checks pass, submit the form
  return true;
}


</script>
</head>
<body>

<form name="myForm" action="nextpage.html" onsubmit="return validateForm();" oninput="checkPassword();"  method="post">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <div class="strength-bar">
    <div id="strength-meter" class="strength-meter"></div>
  </div>
  <br>
  <input type="submit" value="Submit">
</form> 
<script>
    // Function to check the password strength
function checkPassword() {
        // Get the password from the input field
        var password = document.getElementById("password").value;

        // Check if the password meets the requirements
        var hasUppercase = /[A-Z]/.test(password);
        var hasLowercase = /[a-z]/.test(password);
        var hasNumber = /\d/.test(password);
        var has8Chars = password.length >= 8;

        // Set the strength meter width and color
        var strengthMeter = document.getElementById("strength-meter");
        if (hasUppercase && hasLowercase && hasNumber && has8Chars) {
          // Strong password
          strengthMeter.style.width = "66%";
          strengthMeter.classList.remove("weak");
          strengthMeter.classList.add("strong");
        } else {
          // Weak password
          strengthMeter.style.width = "33%";
          strengthMeter.classList.remove("strong");
          strengthMeter.classList.add("weak");
        }
      }
</script>
</body>
</html>

I looked through the logic again and again to check if the logic is incorrect but it's all right. I have no idea why it's still not updating the color on writing password. It only shows the green bar.

Answer 1

looks like the issue is that your code is only updating the password strength meter when the function checkPassword is called, but this function is never actually called in your code. You need to call the function whenever the user types something in the password input field, so that the password strength meter is updated in real time.

You can do this by adding an onkeyup event listener to the password input field, and calling the checkPassword function from within the event listener. Like this

<!-- Password input -->
<input type="password" id="password" onkeyup="checkPassword()">

<!-- Password strength -->
<div id="strength-meter" class="strength-meter"></div>

This will call the checkPassword function whenever the user releases a key while the password input field is focused. This will allow the password strength meter to be updated in real time as the user types their password.

Password Strength Issue

Question

1 answers

solution1
2 2022-12-07 06:16:17

Password Strength Issue

Question

1 answers

solution1 2 2022-12-07 06:16:17

solution1
2 2022-12-07 06:16:17