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
  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 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 
            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");
        let lengBoolean, bigLetterBoolean, numBoolean, specialCharBoolean;
        let leng = document.querySelector(".leng");
        let bigLetter = document.querySelector(".big-letter");
        let num = document.querySelector(".num");
        let specialChar = document.querySelector(".special-char");
        const specialChars = "!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?`~";
        const numbers = "0123456789";
    
        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", () => {
            let value = password.value;
            if (value.length < 8) {
                lengBoolean = false;
            } else if (value.length > 7) {
                lengBoolean = true;
            }
    
            if (value.toLowerCase() == value) {
                bigLetterBoolean = false;
            } else {
                bigLetterBoolean = true;
            }
    
            numBoolean = false;
            for (let i = 0; i < value.length; i++) {
                for (let j = 0; j < numbers.length; j++) {
                    if (value[i] == numbers[j]) {
                        numBoolean = true;
                    }
                }
            }
    
            specialCharBoolean = false;
            for (let i = 0; i < value.length; i++) {
                for (let j = 0; j < specialChars.length; j++) {
                    if (value[i] == specialChars[j]) {
                        specialCharBoolean = true;
                    }
                }
            }
    
            if (lengBoolean == true && bigLetterBoolean == true && numBoolean == true && specialCharBoolean == true) {
                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");
    
                if (lengBoolean == false) {
                    leng.classList.add("wrong");
                    leng.classList.remove("good");
                } else {
                    leng.classList.add("good");
                    leng.classList.remove("wrong");
                }
    
                if (bigLetterBoolean == false) {
                    bigLetter.classList.add("wrong");
                    bigLetter.classList.remove("good");
                } else {
                    bigLetter.classList.add("good");
                    bigLetter.classList.remove("wrong");
                }
    
                if (numBoolean == false) {
                    num.classList.add("wrong");
                    num.classList.remove("good");
                } else {
                    num.classList.add("good");
                    num.classList.remove("wrong");
                }
    
                if (specialCharBoolean == false) {
                    specialChar.classList.add("wrong");
                    specialChar.classList.remove("good");
                } else {
                    specialChar.classList.add("good");
                    specialChar.classList.remove("wrong");
                }
            }
        });
    
        password.addEventListener("blur", () => {
            passwordAlert.classList.add("d-none");
        });
    });