Password validation

Bootstrap 5 Password validation component

Responsive Password validation built with Bootstrap 5. Provide feedback your users whether their password strength is sufficient through password validation.

Basic example

To make a validation element that also displays password requirements:

  1. use input with type=password and div with alert class
  2. Add custom CSS that will add display: none for checks and crosses icons
  3. Add JS that:
    1. a) will make the alert div appear when the input element is in focus and disappear when it is not
    2. b) specify the terms of the password
    3. c) will turn crosses icons into checks if the condition is met and vice versa, and if all conditions are met, it will change the div background and feedback input color

Good
Wrong
Edit in sandbox 
<div class="row">
  <div class="col-6">
    <div class="input-group d-flex">
      <span
        class="input-group-text border-0"
        id="password"
        >
        <i class="fas fa-lock fa-2x me-1"></i>
    </span>
      <input
        type="password"
        class="form-control rounded mt-1"
        placeholder="Type your password"
        aria-label="password"
        aria-describedby="password"
        id="password-input"
      />
      <div class="valid-feedback">Good</div>
      <div class="invalid-feedback">Wrong</div>
    </div>
  </div>

  <div class="col-6 mt-4 mt-xxl-0 w-auto h-auto">

    <div
      data-mdb-alert-init class="alert px-4 py-3 mb-0 d-none"
      role="alert"
      data-mdb-color="warning"
      id="password-alert"
      >
      <ul class="list-unstyled mb-0">
        <li class="requirements leng">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 8 chars</li>
        <li class="requirements big-letter">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 big letter.</li>
        <li class="requirements num">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 number.</li>
        <li class="requirements special-char">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 special char.</li>
      </ul>
    </div>

  </div>
</div>
.wrong .fa-check {
    display: none;
}
.good .fa-times {
    display: none;
}
.valid-feedback,
.invalid-feedback {
  margin-left: calc(2em + 0.25rem + 1.5rem);
}
addEventListener("DOMContentLoaded", (event) => {
  const password = document.getElementById("password-input");
  const passwordAlert = document.getElementById("password-alert");
  const requirements = document.querySelectorAll(".requirements");
  const leng = document.querySelector(".leng");
  const bigLetter = document.querySelector(".big-letter");
  const num = document.querySelector(".num");
  const specialChar = document.querySelector(".special-char");

  requirements.forEach((element) => element.classList.add("wrong"));

  password.addEventListener("focus", () => {
      passwordAlert.classList.remove("d-none");
      if (!password.classList.contains("is-valid")) {
          password.classList.add("is-invalid");
      }
  });

  password.addEventListener("input", () => {
      const value = password.value;
      const isLengthValid = value.length >= 8;
      const hasUpperCase = /[A-Z]/.test(value);
      const hasNumber = /\d/.test(value);
      const hasSpecialChar = /[!@#$%^&*()\[\]{}\\|;:'",<.>/?`~]/.test(value);

      leng.classList.toggle("good", isLengthValid);
      leng.classList.toggle("wrong", !isLengthValid);
      bigLetter.classList.toggle("good", hasUpperCase);
      bigLetter.classList.toggle("wrong", !hasUpperCase);
      num.classList.toggle("good", hasNumber);
      num.classList.toggle("wrong", !hasNumber);
      specialChar.classList.toggle("good", hasSpecialChar);
      specialChar.classList.toggle("wrong", !hasSpecialChar);

      const isPasswordValid = isLengthValid && hasUpperCase && hasNumber && hasSpecialChar;

      if (isPasswordValid) {
          password.classList.remove("is-invalid");
          password.classList.add("is-valid");

          requirements.forEach((element) => {
              element.classList.remove("wrong");
              element.classList.add("good");
          });

          passwordAlert.classList.remove("alert-warning");
          passwordAlert.classList.add("alert-success");
      } else {
          password.classList.remove("is-valid");
          password.classList.add("is-invalid");

          passwordAlert.classList.add("alert-warning");
          passwordAlert.classList.remove("alert-success");
      }
  });

  password.addEventListener("blur", () => {
      passwordAlert.classList.add("d-none");
  });
});