Password Validation Form Using JavaScript

Last Updated : 20 Jun, 2023

The password Validation form is used to check the password requirements such as the password must have at least one Uppercase, or lowercase, number, and the length of the password. We can also check this after submitting the form but it’s not recommended. We can easily check before submitting the form this can save us time.

In this article, we are going to make a Password validation form using JavaScript. Before going to start making the feature first we will talk about what functionalities we want in this project.

Functionalities we want:

While entering the password a message will be displayed.
The message will alert the user to enter the password requirements.
If the user doesn’t enter the password according to the requirements it will show the message to enter the desired requirements.

Here is the preview of the feature that we are going to make:

Password Validation Form

Project Structure:

- index.html
- style.css
- script.js

Example: In this example code, we have implemented the above-discussed functionality.

HTML Code: This file contains the structure of the feature
CSS Code: It defines the styles for a form container and its elements, including input fields and a submit button. Additionally, it includes styles for a password message box and error messages.
JavaScript Code: It handles password validation in a web form and performs the checks on the password input field and updates the corresponding password message items based on certain criteria.

Javascript

// script.js File  
var passwordInput = document.getElementById("password"); 
var passwordMessageItems = document.getElementsByClassName("password-message-item"); 
var passwordMessage = document.getElementById("password-message"); 
  
  
passwordInput.onfocus = function () { 
    passwordMessage.style.display = "block"; 
} 
  
// After clicking outside of password input hide the message 
passwordInput.onblur = function () { 
    passwordMessage.style.display = "none"; 
} 
  
passwordInput.onkeyup = function () { 
    // checking uppercase letters 
    let uppercaseRegex = /[A-Z]/g; 
    if (passwordInput.value.match(uppercaseRegex)) { 
        passwordMessageItems[1].classList.remove("invalid"); 
        passwordMessageItems[1].classList.add("valid"); 
    } else { 
        passwordMessageItems[1].classList.remove("valid"); 
        passwordMessageItems[1].classList.add("invalid"); 
    } 
  
    // checking lowercase letters 
    let lowercaseRegex = /[a-z]/g; 
    if (passwordInput.value.match(lowercaseRegex)) { 
        passwordMessageItems[0].classList.remove("invalid"); 
        passwordMessageItems[0].classList.add("valid"); 
    } else { 
        passwordMessageItems[0].classList.remove("valid"); 
        passwordMessageItems[0].classList.add("invalid"); 
    } 
  
    // checking the number 
    let numbersRegex = /[0-9]/g; 
    if (passwordInput.value.match(numbersRegex)) { 
        passwordMessageItems[2].classList.remove("invalid"); 
        passwordMessageItems[2].classList.add("valid"); 
    } else { 
        passwordMessageItems[2].classList.remove("valid"); 
        passwordMessageItems[2].classList.add("invalid"); 
    } 
  
    // Checking length of the password 
    if (passwordInput.value.length >= 8) { 
        passwordMessageItems[3].classList.remove("invalid"); 
        passwordMessageItems[3].classList.add("valid"); 
    } else { 
        passwordMessageItems[3].classList.remove("valid"); 
        passwordMessageItems[3].classList.add("invalid"); 
    } 
}

HTML

<!-- index.html file -->
<!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="style.css"> 
    <title>Password Validation Form using javaScript</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h3>Password Validation Form using JavaScript</h3> 
        <form action="#"> 
            <label for="username">Username</label> 
            <input type="text" id="username" name="username" required> 
  
            <label for="password">Password</label> 
            <input type="password" 
                   id="password" 
                   name="password" 
                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
                   title="Must contain at least one number,  
               one uppercase and lowercase letter, and at least 8 characters"  
                   required> 
  
            <div id="password-message"> 
                <h3>Password must contain:</h3> 
                <p class="password-message-item invalid">At least 
                    <b>one lowercase letter</b> 
                </p> 
                <p class="password-message-item invalid">At least 
                    <b>one uppercase letter</b> 
                </p> 
                <p class="password-message-item invalid">At least 
                    <b>one number</b> 
                </p> 
                <p class="password-message-item invalid">Minimum 
                    <b>8 characters</b> 
                </p> 
            </div> 
  
            <input type="submit" value="Submit"> 
        </form> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Style.css File */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Styling the container */
.container { 
    margin: 0 auto; 
    padding: 20px; 
    max-width: 400px; 
    background-color: #ffffff; 
} 
  
/* Style all input fields */
input { 
    width: 100%; 
    padding: 12px; 
    margin: 6px 0 16px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
} 
  
/* Style the submit button */
input[type=submit] { 
    background-color: #0f0fe9; 
    color: white; 
    cursor: pointer; 
} 
  
input[type=submit]:hover { 
    background-color: #4141fc; 
} 
  
/* The message box */
#password-message { 
    display: none; 
    background: #ffffff; 
    color: #000; 
    position: relative; 
    padding: 20px; 
    margin-top: 10px; 
    text-align: left; 
} 
  
#password-message h3 { 
    font-size: 15px; 
    margin-top: 0; 
    text-transform: uppercase; 
} 
  
#password-message p { 
    margin: 8px 0; 
} 
  
.valid { 
    color: green; 
} 
  
.valid:before { 
    position: relative; 
    left: -35px; 
    content: "✔"; 
} 
  
.invalid { 
    color: red; 
} 
  
.invalid:before { 
    position: relative; 
    left: -35px; 
    content: "✖"; 
} 
  
/* Error message style */
.error-msg { 
    color: red; 
    font-size: 14px; 
    margin-top: 4px; 
}