Home » Password Strength Validation in JavaScript || Hide Show Password Toggle

Password Strength Validation in JavaScript || Hide Show Password Toggle

Categories: Forms
Password Strength Validation in JavaScript | Hide Show Password Toggle

A strong password is essential for protecting online accounts. In this tutorial, you will learn how to build a responsive password strength validation form using HTML, CSS, and JavaScript.

We will add a hide/show password toggle feature and a dynamic strength meter, helping users to create secure passwords in real-time. This project is beginner-friendly and can be integrated into login and signup pages.

Watch the Video Tutorial: Password Strength Validation in JavaScript

Features of the Password Validation Form:

  • Real-time strength indicator: Poor, Weak, Medium, Good, Strong
  • Checks for:
    • Minimum 8 characters
    • At least one lowercase letter (a-z)
    • At least one uppercase letter (A-Z)
    • At least one number (0-9)
    • At least one special symbol (!-& etc.)
  • Hide/Show password toggle for better user experience
  • Modern, responsive, and mobile-friendly design
  • Easy to integrate into login/signup forms

Why You Should Learn This:

  • Boost your front-end development skills using HTML, CSS, and JavaScript
  • Create secure forms for login and signup pages
  • Improve user experience with interactive password validation
  • Learn dynamic DOM manipulation and validation techniques
  • Build projects that can be added to your portfolio

Step-by-Step Implementation:

  1. HTML Structure:
    • Create a password input field with label and eye icon for hide/show toggle
  2. CSS Styling:
    • Style the password box, validation list, and strength meter with modern UI
  3. JavaScript Validation:
    • Check for lowercase, uppercase, numbers, symbols, and length
    • Update strength meter dynamically
    • Change bar color based on strength
    • Toggle password visibility using the eye icon

Result: A fully functional password validation form that guides users while typing and improves security.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Password strength validation in javascript || Hide Show Password Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="password-wrapper">
        <div class="password-box">
            <form action="">
                <h1 class="header">Password Validation</h1>
                <div class="form-item">
                    <input type="password" id="password" autocomplete="off" required>
                    <label for="password">Type password</label>
                    <i id="hide-show" class="fa-solid fa-eye"></i>
                </div>
                <div class="strength-line"><span id="percentage"></span></div>
                <p id="msg" class="message-text">Poor</p>
                <div class="pass-info">
                    <h1 class="sub-header">Passwords must Contain:</h1>
                    <ul class="pass-list">
                        <li id="length" class="invalid"><i class="fa-solid fa-check"></i> 8 character minimum</li>
                        <li id="lowercase" class="invalid"><i class="fa-solid fa-check"></i> one lowercase character (a-z)</li>
                        <li id="uppercase" class="invalid" ><i class="fa-solid fa-check"></i> one uppercase character (A-Z)</li>
                        <li id="numbers" class="invalid"><i class="fa-solid fa-check"></i> one number (0-9)</li>
                        <li id="symbols" class="invalid"><i class="fa-solid fa-check"></i> one special symbols (!-&)</li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS Code: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.password-wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 15px;
  background-color: #8760FF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.password-box {
  background: #fff;
  padding: 20px 30px;
  width: 520px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.password-box .header {
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  text-align: center;
}

.form-item {
  margin: 20px 5px 10px 5px;
  position: relative;
  margin-bottom: 15px
}

.form-item input {
  display: block;
  width: 100%;
  height: 45px;
  background: transparent;
  color: #333;
  border: solid 1px #ccc;
  outline: none;
  transition: all .3s ease;
  padding: 0 35px 0 15px;
  border-radius: 5px;
  font-size: 17px;
}

.form-item input:focus {
  border-color: #8760FF;
}

.form-item label {
  position: absolute;
  cursor: text;
  z-index: 2;
  top: 13px;
  left: 10px;
  font-size: 17px;
  font-weight: bold;
  background: #fff;
  padding: 0 10px;
  color: #999;
  transition: all .3s ease
}
.form-item label sup{
  color:#ff4757;
}
.form-item input:focus+label,
.form-item input:valid+label {
  font-size: 11px;
  top: -5px
}

.form-item input:focus+label {
  color: #8760FF;
}

#hide-show {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* display: none; */
  user-select: none;
}

.pass-info {}

.pass-info .sub-header {
  font-size: 17px;
  font-weight: 600;
  color: #040404;
}

.pass-list {
  list-style: none;
  padding-top: 20px;
}

.pass-list li {
  list-style: none;
  font-size: 16px;
  margin-bottom: 10px;
  
  color: #040404;
}
.pass-list li.valid{
  color: #1ED66E;
}
.pass-list li.invalid{
  color: #ff4757;
}


.pass-list li i {
  color: #fff;
  /* background: #ff4757; */
  background: #040404;
  padding: 5px;
  margin-right: 10px;
  border-radius: 5%;
  font-size: 10px;
}
.pass-list li.valid i{
  background-color: #1ED66E;
}
.pass-list li.invalid i{
  background-color: #ff4757;
}

.strength-line {
  position: relative;
  height: 8px;
  margin: 10px 0 5px;
  border-radius: 4px;
  background-color: #ccc;
  transition: .5s;
}
#percentage{
  position: absolute;
  height: 8px;
  border-radius: 4px;
  background-color: #23b08d;
  content: '';
}
.message-text {
  text-align: right;
  font-size: 17px;
  font-weight: 600;
  color: #040404;
}

JavaScript Code : 

const passwordInput = document.getElementById("password");
const hideShowIcon = document.getElementById("hide-show");

hideShowIcon.addEventListener("click", () => {
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);
    if (passwordInput.type == 'password') {
        hideShowIcon.classList.remove("fa-eye-slash");
        hideShowIcon.classList.add("fa-eye");
    } else {
        hideShowIcon.classList.remove("fa-eye");
        hideShowIcon.classList.add("fa-eye-slash");
    }
});

passwordInput.addEventListener("input", () => {
    const patternLowercase = /[a-z]/;
    const patternUppercase = /[A-Z]/;
    const patternNumbers = /[\d]/;
    const patternSymbols = /[!-/:-@[-`{-~]/;


    const length = document.getElementById("length");
    const lowercase = document.getElementById("lowercase");
    const uppercase = document.getElementById("uppercase");
    const numbers = document.getElementById("numbers");
    const symbols = document.getElementById("symbols");
    var msg = document.getElementById("msg");


    // Validate length
    if (passwordInput.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
    } else {
        length.classList.add("invalid");
        length.classList.remove("valid");
    }

    // Validate lowercase 
    if (passwordInput.value.match(patternLowercase)) {
        lowercase.classList.remove("invalid");
        lowercase.classList.add("valid");
    } else {
        lowercase.classList.add("invalid");
        lowercase.classList.remove("valid");
    }
    // Validate Uppercase 
    if (passwordInput.value.match(patternUppercase)) {
        uppercase.classList.remove("invalid");
        uppercase.classList.add("valid");
    } else {
        uppercase.classList.add("invalid");
        uppercase.classList.remove("valid");
    }

    // Validate numbers
    if (passwordInput.value.match(patternNumbers)) {
        numbers.classList.remove("invalid");
        numbers.classList.add("valid");
    } else {
        numbers.classList.add("invalid");
        numbers.classList.remove("valid");
    }

    // Validate numbers
    if (passwordInput.value.match(patternNumbers)) {
        numbers.classList.remove("invalid");
        numbers.classList.add("valid");
    } else {
        numbers.classList.add("invalid");
        numbers.classList.remove("valid");
    }
    // Validate symbols
    if (passwordInput.value.match(patternSymbols)) {
        symbols.classList.remove("invalid");
        symbols.classList.add("valid");
    } else {
        symbols.classList.add("invalid");
        symbols.classList.remove("valid");
    }


    let valid = document.getElementsByClassName("valid");
    let percentage = document.getElementById("percentage")
    percentage.setAttribute("style", "width: " + valid.length / 5 * 100 + "%");

    if (valid.length <= 1) {
        msg.innerHTML = "Poor";
        percentage.style.background="#dc3545";
    }
    else if (valid.length == 2) {
        msg.innerHTML = "Weak";
        percentage.style.background="#ff4757 ";
    }
    else if (valid.length == 3) {
        msg.innerHTML = "Midium";
        percentage.style.background="#f0ad4e";
    }
    else if (valid.length == 4) {
        msg.innerHTML = "Good";
        percentage.style.background="#ffc107";
    }
    else {
        msg.innerHTML = "Strong";
        percentage.style.background="#1ED66E";
    }


})

Conclusion:

Creating a Password Strength Validation Form with hide/show password toggle is essential for building modern login/signup pages.

This tutorial helps beginners and professionals understand:

  • JavaScript form validation
  • DOM manipulation
  • Responsive design
  • Modern UI best practices

By implementing this project, you ensure strong passwords for users and enhanced security for your website.

Live Demo

Related