Why is my Javascript password validation criteria not updating in realtime?

Question

I am trying to create a password validation form and it works fairly well. However, the ticks for each validation criteria i.e. use of uppercase, lowercase and numeric characttmlers do not update as expected.

$(document).ready(function() {
  let first,
    len = document.getElementById("len"),
    upr = document.getElementById("upr"),
    lwr = document.getElementById("lwr"),
    spc = document.getElementById("spc"),
    num = document.getElementById("num"),
    match_ = document.getElementById("match"),
    submit = document.querySelector("input[type=submit]");
  submit.classList.add("disabled");

  for (let [index, i] of document.querySelectorAll("input[type=password]").entries()) {
    i.addEventListener("focus", function() {
      document.getElementsByClassName("validate")[index].style.display = "block";
    });
    i.addEventListener("blur", function() {
      document.getElementsByClassName("validate")[index].style.display = "none";
    });
    switch (index) {
      case 0:
        first = i;
        i.addEventListener("input", function() {
          if (this.value.length >= 8) {
            len.setAttribute("icon", "mdi:tick-circle");
          } else {
            len.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
          if (this.value.match(/[a-z]/g)) {
            lwr.setAttribute("icon", "mdi:tick-circle");
          } else {
            lwr.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
          if (this.value.match(/[A-Z]/g)) {
            upr.setAttribute("icon", "mdi:tick-circle");
          } else {
            upr.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
          if (this.value.match(/[!@#$%^&*.]/g)) {
            spc.setAttribute("icon", "mdi:tick-circle");
          } else {
            spc.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
          if (this.value.match(/[0-9]/g)) {
            num.setAttribute("icon", "mdi:tick-circle");
          } else {
            num.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
        });
        break;
      case 1:
        i.addEventListener("input", function() {
          if (first.value == this.value) {
            match_.setAttribute("icon", "mdi:tick-circle");
          } else {
            match_.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");
            return false;
          }
          submit.classList.remove("disabled");
        });
        break;
    }
  }
});

.validate {
    display: none;
}

iconify-icon[icon="mdi:tick-circle"] {
    color: green;
}

iconify-icon[icon="gridicons:cross-circle"] {
    color: red;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>
<div class="container">
  <form action="trial4.html">
    <div class="mb-3 mt-3">
      <label class="form-label">Password:</label>
      <input class="form-control" type="password" required="required">
    </div>
    <div class="validate">
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="len"></iconify-icon>
        Password length = 8
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="upr"></iconify-icon>
        Contains at least one uppercase letter
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="lwr"></iconify-icon>
        Contains at least one lowercase letter
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="spc"></iconify-icon>
        Contains at least one special character (!@#$%^&*).
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="num"></iconify-icon>
        Contains at least one numeric character
      </p>
    </div>
    <div class="mb-3 mt-3">
      <label class="form-label">Confirm Password:</label>
      <input class="form-control" type="password" required="required">
    </div>
    <div class="validate">
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="match"></iconify-icon>
        Must match password
      </p>
    </div>
    <input class="btn btn-success" type="submit" />
  </form>
</div>

On entering an uppercase letter, the tick does not update immediately and neither do other criteria such as lowercase, numeric and special characters (!@#$%^&*). How can I solve this? Suggestions such as code improvements are also welcome.

Answer 1

The problem are your else block in which you have return false so the first condition beeing false will result in the follow up conditions not to be checked.

You could do something like:

    i.addEventListener("input", function() {
          // have a variable that holds the valid state
          let isValid = true
      
          if (this.value.length >= 8) {
            len.setAttribute("icon", "mdi:tick-circle");
          } else {
            len.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");

            // set the valid state to false if the condition was not met
            isValid = false
          }
          if (this.value.match(/[a-z]/g)) {
            lwr.setAttribute("icon", "mdi:tick-circle");
          } else {
            lwr.setAttribute("icon", "gridicons:cross-circle");
            if (!submit.classList.contains("disabled")) submit.classList.add("disabled");

            // set the valid state to false if the condition was not met
            isValid = false
          }
          //....
          
          return isValid
       })