In today’s digital world, it is important to create strong and secure passwords that are difficult to guess or hack. This is where password validation or strength checks come into play. By implementing this password validation feature, website owners can ensure that users create strong passwords that are less likely to be compromised.
In this blog post, you’ll learn how to do Password Validation Check in HTML, CSS, and JavaScript. Password validation check is a feature that checks if the entered password meets the minimum requirements. This can include a minimum length of 8 characters, at least one uppercase letter, one special character, and more.
In this post, you’ll not only learn how to perform a password validation check, but you’ll also learn how to implement a handy eye icon that toggles password visibility. With this feature, users can easily show or hide their passwords as they enter them.
If you’re excited to see a live demo of this password validation check, click here to check it out. For a full video tutorial on password validation or strength check using HTML, CSS, and JavaScript, you can watch the given YouTube video.
Video Tutorial of Password Validation Check in JavaScript
If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide explanatory comments to make the code easy to understand and follow.
But if you prefer reading blog posts or want a quick summary of the steps involved in creating a password validation, you can continue reading this post. By the end of this post, you will have a good understanding of how to do a password validation check and toggle password visibility on click with HTML, CSS, and JavaScript.
Steps To Do Password Validation Check in JavaScript
To create a password validation check feature using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create anÂ
index.html file. The file name must be index and its extension .html - Create aÂ
style.css file. The file name must be style and its extension .css - Create aÂ
script.js file. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html file to create a basic layout for the password validation. Keep in mind that if you decide to change the order of the requirements in your password validation checklist, you will need to make some corresponding changes to the JavaScript code as well.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Password Validation Check | CodingNepal</title>
<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>
Next, add the following CSS codes to your style.css file to give a basic look and feel to the password validation checklist and password input. If you wish, you can customize it to your liking by changing the color, font, size, and other CSS properties in the file.
/* Import Google font - Poppins */
@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,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: 0.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;
}
}
Finally, add the following JavaScript code to your script.js file to add functionality for toggling password visibility and checking the user-entered password against the requirements you have specified in your password validation checklist.
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"}`;
});
I have added comments to each line of code in the JavaScript snippet to make it easy to understand and follow along. If you have any questions or need further clarification, please feel free to leave a comment below and I will do my best to help you out.
Conclusion and Final Words
In this blog post, I have covered how to implement a password validation check using HTML, CSS, and JavaScript. This includes creating a password checklist, adding the necessary HTML elements to the form, styling the elements using CSS, and adding JavaScript code to validate the password and toggle password visibility.
By following the step-by-step guide and the provided code, you should be able to easily add these features to your login or signup forms as needed.
In addition, I’ve covered web development concepts such as DOM manipulation, event handling, objects, CSS styling, and more. By understanding these concepts, you can not only create password validation checks but also apply them to other web development projects.
If you encounter any problems or your code is not working as expected, you can download the source code files for this password validation for free. Click on the download button to get the zip file containing the project folder with source code files.
