Making strong, secure password that are hard to figure out or steal is crucial in today’s digital environment. This is where strength tests or password validation are useful. Website administrators can guarantee that users create secure passwords that are less likely to be compromised by implementing this password validation feature.
What is Password Validation?
Password Verification refers to the procedure, that verifies whether a password meets to specific guidelines. These guidelines ensures that you password is robust and safe. When you set up a new password or modify an existing one, websites employ password verification to assist you.
Why Is Password Validation Important?
- Prevents Weak Password: It stops you from using passwords that are easily guessed, such as “123456”or “password”.
- Safeguards Your Accounts: Strong passwords reduce the chance of hackers gaining access to your accounts.
- Ensures System Security: Password validation assists websites and apps stay safe by ensuring users create robust passwords.
Common Password Validation Guidelines
Most websites and apps implements rules for password creation. Here are some typical ones:
- Minimum Length: Your password should consist of at least 8-12 characters.
- Uppercase Letters: Use of at least one capital letter (A, B, C).
- Lowercase Letters: Include lower case letters (a, b, c).
- Numbers: Ensure there is at least one digit (1, 2, 3).
- Symbols: Utilize special characters such as @, #, $, %.
- No Common Words: Avoid using words like “password”, or “admin”.
- No Repetitive Patterns: Avoid patterns like “aaa”, or “123123”
How Does Password Validation Operate?
When you enter a password, the system evaluates it against the established guidelines. If your password fails comply with the rules, you will receive a notification such as:
- "Password must be at least 8 characters"
- "Password must contain a number or special character."
- "Password cannot include your username."
However, you can read on for a brief rundown of the procedures needed to create a password validation if you prefer reading of this blog post. You will know how to use HTML, CSS, and JavaScript to perform a validation of password check and toggle password visibility on click by the end of this post.
HTML Code
Start by adding the following HTML codes to your index.html document to establish a simple password validation layout. You will also need to make some adjustments to the JavaScript code if decide to rearrange the requirements in you password validation checklist.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Validation of Password | Coding Jasim</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Link for Fontawsome 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>1 number at least (0 to 9)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>1 lowercase letter at leaset (a to z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>1 special symbol at least (!...$)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>1 uppercase letter at least (A to Z)</span>
</li>
</ul>
</div>
</div>
</body>
</html>CSS Code
Then, incorporate the subsequent CSS codes into your style.css file to provide a simple appearance and feel for the password input and password validation checklist. By altering the file’s font, size, color, and other CSS properties, you can personalize it to your preference.
/* Google font Import - 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: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f57da1;
}
.wrapper {
width: 450px;
overflow: hidden;
padding: 28px;
border-radius: 8px;
background: #7de6fb;
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: #955f5f;
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: #841919;
}
@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;
}
}JavaScript Code
To wrap thins up, make sure to stick this JavaScript code into your script.js code. It will let users toggle the visibility of their password and check if what they typed meets the requirements from your password validation checklist.
const passInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const reqList = document.querySelectorAll(".requirement-list li");
const requirements = [
{ regex: /.{8,}/, index: 0 }, // 8 characters minimum
{ regex: /[0-9]/, index: 1 }, // one numerical number at least
{ 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
]
passInput.addEventListener("keyup", (e) => {
requirements.forEach(item => {
// Verify if the password matches the requirement regex
const isValid = item.regex.test(e.target.value);
const requirementItem = reqList[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";Final Thoughts
In this blog, I showed you how to set up a password validation using HTML, CSS, and JavaScript. We talked about making a password checklist, adding the right HTML elements to your form, styling them with CSS, and writing some JavaScript to check the password and toggle its visibility.
If you follow step-by-step guide and use the code I provided, you should be able to add these features to you login and sign up form whenever you need to.
The source code files for this password validation are available for free download in case you run into any issues or your code does not function as intended. To obtain the zip file with the project folder and source code files, click the download button.