Simple Password Validator

index.html

<div>
  <input id="passInput" type="password" placeholder="Enter password">
  <p>
    Password should contain at least
    <span id="length" class="invalid">8 characters</span>,
    <span id="capital" class="invalid">1 upper case letter</span>,
    <span id="letter" class="invalid">1 lower case letter</span>,
    <span id="number" class="invalid">1 number</span>, and
    <span id="character" class="invalid">1 special character</span>
  </p>
</div>

script.js

document.addEventListener("DOMContentLoaded", function(event) {
  var passInput = document.getElementById("passInput");
  var letter = document.getElementById("letter");
  var capital = document.getElementById("capital");
  var number = document.getElementById("number");
  var length = document.getElementById("length");
  var character = document.getElementById("character");
  var lowerCaseLetters = /[a-z]+/;
  var upperCaseLetters = /[A-Z]+/;
  var numbers = /[0-9]+/;
  var characters = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+/;
  var remClass, addClass;
  
  valid = (req, state) => {
    remClass = state ? "invalid" : "valid";
    addClass = state ? "valid" : "invalid";
    req.classList.remove(remClass);
    req.classList.add(addClass);
  }

  passInput.onkeyup = () => {
    // Validate lowercase letters
    lowerCaseLetters.test(passInput.value) ? valid(letter, true) : valid(letter, false);
    // Validate capital letters
    upperCaseLetters.test(passInput.value) ? valid(capital, true) : valid(capital, false);
    // Validate numbers
    numbers.test(passInput.value) ? valid(number, true) : valid(number, false);
    // Validate characters
    characters.test(passInput.value) ? valid(character, true) : valid(character, false);
    // Validate length
    passInput.value.length >= 8 ? valid(length, true) : valid(length, false);
  }
})

simple-password-validator.markdown

Simple Password Validator

Simple Password Validator with just Vanilla JS

A Pen by Iah Buenacosa on CodePen.

License.

style.css

.valid { color: #D8DD22 !important; }
.invalid { color: #D91171 !important; }






/* Extra Styling */
body {
  background: #0C2D57;
}

div {
  width: 400px;
  margin: 80px auto;
  background: #061733;
  padding: 60px 40px 60px 60px;
  border-radius: 15px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .1);
}

div input {
  width: 340px;
  padding: 17px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .1);
  margin: 0 auto;
}

div p {
  font-family: 'Helvetica', 'Segoe UI Light', sans-serif;
  font-size: 14px;
  color: #fff;
}