Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a password validation form with CSS and JavaScript?
Creating a password validation form helps users understand password requirements in real-time. This tutorial shows how to build an interactive password validation form using CSS for styling and JavaScript for dynamic feedback. The validation system provides visual indicators showing whether password criteria are met.
HTML Form Structure
First, create a basic form with username and password fields. The password field includes a pattern attribute for validation ?
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
required/>
<input type="submit" value="Submit" />
</form>
Password Requirements Display
Add a div to show password requirements with checkmarks or crosses ?
<div id="checksField"> <h3>Password must contain the following:</h3> <p id="letter" class="wrong">A <b>lowercase</b> letter</p> <p id="capital" class="wrong">A <b>capital (uppercase)</b> letter</p> <p id="number" class="wrong">A <b>number</b></p> <p id="length" class="wrong">Minimum <b>8 characters</b></p> </div>
CSS Styling
Style the form and validation indicators ?
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
border-radius: 5px;
}
#checksField p {
padding: 10px 35px;
font-size: 16px;
margin: 5px 0;
}
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "?";
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "?";
}
Complete Example
Here's a complete password validation form with CSS styling and JavaScript functionality ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
input {
width: 100%;
padding: 12px;
margin-top: 6px;
margin-bottom: 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input:focus {
border-color: #4CAF50;
outline: none;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
font-weight: bold;
cursor: pointer;
border: none;
}
input[type="submit"]:hover {
background-color: #45a049;
}
label {
font-weight: bold;
color: #333;
}
#checksField {
display: none;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-top: 10px;
}
#checksField h3 {
margin-top: 0;
color: #333;
}
#checksField p {
padding: 8px 35px;
font-size: 14px;
margin: 8px 0;
}
.correct {
color: green;
}
.correct:before {
position: relative;
left: -25px;
content: "?";
font-weight: bold;
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -25px;
content: "?";
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Password Validation Form</h2>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" placeholder="Enter username" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass"
placeholder="Enter password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
required/>
<input type="submit" value="Submit" />
</form>
<div id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="wrong">A <b>number</b></p>
<p id="length" class="wrong">Minimum <b>8 characters</b></p>
</div>
</div>
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// Show requirements when password field is focused
myInput.onfocus = function() {
document.getElementById("checksField").style.display = "block";
};
// Hide requirements when password field loses focus
myInput.onblur = function() {
document.getElementById("checksField").style.display = "none";
};
// Validate password as user types
myInput.onkeyup = function() {
// Check for lowercase letters
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
// Check for uppercase letters
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
// Check for numbers
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
// Check for minimum length
if (myInput.value.length >= 8) {
length.classList.remove("wrong");
length.classList.add("correct");
} else {
length.classList.remove("correct");
length.classList.add("wrong");
}
};
</script>
</body>
</html>
A registration form appears with username and password fields. When you click on the password field, a validation panel shows below with red X marks for unmet requirements. As you type, checkmarks turn green when password criteria are satisfied (lowercase letter, uppercase letter, number, and minimum 8 characters).
Conclusion
This password validation form provides real-time feedback to users about password strength requirements. The combination of CSS styling and JavaScript validation creates an intuitive user experience that guides users to create secure passwords.
Updated on: 2026-03-15T14:41:15+05:30
2K+ Views
Advertisements