How to Create Password Validation Checker in HTML, CSS and JavaScript
Hi to all, in this article I am going to tell you all about how to create a password validation checker in HTML, CSS and JavaScript easily in just few minutes.
It's critical to build strong, secure passwords that are challenging to guess or hack in the modern digital environment.
Password validation or strength checks are useful in this situation.
Website owners may make sure that users create secure passwords that are less likely to be compromised by putting this password validation tool into place.
Here you will learn how to do a password validation check in HTML, CSS, and JavaScript by reading this blog post.
A feature called password validation check determines whether the password input satisfies the required minimum length.
A minimum of eight characters, one capital letter, one special character, and more can be included.
This article will teach you not only how to do a password validation check, but also how to add a useful eye symbol that toggles password visibility and users can quickly reveal or conceal their passwords as they are entered with this function.
How to Create Password Validation Checker
The below are the detailed steps provided to create a simple password validator checker in HTML, CSS and JavaScript.
- Make a folder. You can create the aforementioned files inside of this folder and give it any name you choose.
- Make a file named index.html. The file extension must be .html.
- Make a file named style.css. its extension must be included in the file name as .CSS.
- Make a file named script.js. The file extension must be .js.
To begin, add the following HTML codes to your index.html page so that the password validation has a basic layout.
Remember that you will also need to make comparable modifications to the JavaScript code if you decide to rearrange the requirements in your password validation checklist.
Adding HTML Code:
First of all open index.html file
Copy below provided code and paste it inside index.html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fontawesome Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="pass-field">
<input type="password" placeholder="Create password">
<i class="fa-solid fa-eye"></i>
</div>
<div class="content">
<p>Password must contains</p>
<ul class="requirement-list">
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 8 characters length</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 number (0...9)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 lowercase letter (a...z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 special symbol (!...$)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 uppercase letter (A...Z)</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Adding CSS Code:
First of all open style.css file.
Copy below provided code and paste it inside style.css file
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap);
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#4285F4}
.wrapper{width:450px;overflow:hidden;padding:28px;border-radius:8px;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.06)}
.wrapper .pass-field{height:65px;width:100%;position:relative}
.pass-field input{width:100%;height:100%;outline:none;padding:0 17px;font-size:1.3rem;border-radius:5px;border:1px solid #999}.pass-field input:focus{padding:0 16px;border:2px solid #4285F4}
.pass-field i{right:18px;top:50%;font-size:1.2rem;color:#999;cursor:pointer;position:absolute;transform:translateY(-50%)}.wrapper .content{margin:20px 0 10px}
.content p{color:#333;font-size:1.3rem}.content .requirement-list{margin-top:20px}.requirement-list li{font-size:1.3rem;list-style:none;display:flex;align-items:center;margin-bottom:15px}
.requirement-list li i{width:20px;color:#aaa;font-size:.6rem}.requirement-list li.valid i{font-size:1.2rem;color:#4285F4}.requirement-list li span{margin-left:12px;color:#333}.requirement-list li.valid span{color:#999}@media screen and (max-width:500px){body,.wrapper{padding:15px}.wrapper .pass-field{height:55px}.pass-field input,.content p{font-size:1.15rem}.pass-field i,.requirement-list li{font-size:1.1rem}.requirement-list li span{margin-left:7px}}
Adding JavaScript Code:
First of all open script.js file
Copy below provided code and paste it inside script.js file
const passwordInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const requirementList = document.querySelectorAll(".requirement-list li");
// An array of password requirements with corresponding
// regular expressions and index of the requirement list item
const requirements = [
{ regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
{ regex: /[0-9]/, index: 1 }, // At least one number
{ regex: /[a-z]/, index: 2 }, // At least one lowercase letter
{ regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
{ regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
]
passwordInput.addEventListener("keyup", (e) => {
requirements.forEach(item => {
// Check if the password matches the requirement regex
const isValid = item.regex.test(e.target.value);
const requirementItem = requirementList[item.index];
// Updating class and icon of requirement item if requirement matched or not
if (isValid) {
requirementItem.classList.add("valid");
requirementItem.firstElementChild.className = "fa-solid fa-check";
} else {
requirementItem.classList.remove("valid");
requirementItem.firstElementChild.className = "fa-solid fa-circle";
}
});
});
eyeIcon.addEventListener("click", () => {
// Toggle the password input type between "password" and "text"
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
// Update the eye icon class based on the password input type
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});
To make it easier to read and follow along, I have included comments to each line of code in the JavaScript sample. Please feel free to leave a comment on mail or through contact page if you need any explanation or if you have any queries. I will try my best to assist you.
Demo:
Password must contains
- At least 8 characters length
- At least 1 number (0-9)
- At least 1 lowercase letter (a-z)
- At least 1 special symbol (!-$)
- At least 1 uppercase letter (A-Z)
Conclusion
In this blog article, I discussed how to build a password validation check using HTML, CSS, and JavaScript and this entails making a checklist of passwords, adding the required HTML components to the form, applying CSS styling to the elements, and integrating JavaScript code to verify the password and toggle its visibility.
You should have no trouble adding these features to your login or signup forms as needed if you follow the detailed instructions and use the provided code.
I've also addressed web programming basics including DOM manipulation, event management, objects, CSS styling, and others. You can apply these ideas to other web development assignments in addition to creating password validation checks by grasping these ideas.