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; } |
Output: Click here to see live code output
Output GIF
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
