Enhanced Password Form with Confirmation and Strength Meter (HTML5 + JS + Regex)
Last updated 2 weeks, 4 days ago | 69 views 75 5
Second page link: Real-Time Password Validation Using HTML5, Regex, and JavaScript
Great! Let's extend the previous example to include:
-
✅ Password confirmation (i.e., "Confirm Password" must match "Password")
-
✅ A basic password strength meter that updates in real time
Enhanced Password Form with Confirmation and Strength Meter (HTML5 + JS + Regex)
This version guides the user to:
-
Enter a strong password
-
Confirm it correctly
-
See password strength in real time (Weak, Medium, Strong)
✅ Full Working Example (HTML + JS + CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password Validation with Confirmation and Strength Meter</title>
<style>
input {
padding: 8px;
width: 300px;
font-size: 14px;
margin-bottom: 8px;
}
.feedback, .strength, .match {
font-size: 13px;
margin-top: 5px;
}
.valid { color: green; }
.invalid { color: red; }
.strength-bar {
height: 6px;
width: 100%;
background: #ddd;
margin-top: 4px;
position: relative;
}
.strength-level {
height: 100%;
transition: width 0.3s;
}
.weak { width: 33%; background: red; }
.medium { width: 66%; background: orange; }
.strong { width: 100%; background: green; }
</style>
</head>
<body>
<h2>Create an Account</h2>
<form id="signupForm">
<label for="password">Password:</label><br>
<input
type="password"
id="password"
name="password"
required
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$"
title="At least 8 characters, 1 uppercase, 1 lowercase, 1 number, and 1 special character"
><br>
<div id="feedback" class="feedback"></div>
<div class="strength">
Strength:
<div class="strength-bar">
<div id="strengthLevel" class="strength-level"></div>
</div>
</div>
<label for="confirmPassword">Confirm Password:</label><br>
<input type="password" id="confirmPassword" required><br>
<div id="matchFeedback" class="match"></div><br>
<button type="submit">Register</button>
</form>
<script>
const passwordInput = document.getElementById('password');
const confirmInput = document.getElementById('confirmPassword');
const feedback = document.getElementById('feedback');
const strengthLevel = document.getElementById('strengthLevel');
const matchFeedback = document.getElementById('matchFeedback');
const form = document.getElementById('signupForm');
function checkPasswordStrength(password) {
let strength = 0;
if (password.length >= 8) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[a-z]/.test(password)) strength++;
if (/\d/.test(password)) strength++;
if (/[\W_]/.test(password)) strength++;
if (strength <= 2) return 'weak';
if (strength === 3 || strength === 4) return 'medium';
return 'strong';
}
passwordInput.addEventListener('input', function () {
const password = passwordInput.value;
// Real-time feedback
const rules = [
{ regex: /.{8,}/, label: 'At least 8 characters' },
{ regex: /[a-z]/, label: 'At least one lowercase letter' },
{ regex: /[A-Z]/, label: 'At least one uppercase letter' },
{ regex: /\d/, label: 'At least one number' },
{ regex: /[\W_]/, label: 'At least one special character' },
];
let messages = rules.map(rule => {
return rule.regex.test(password)
? `<div class="valid">✔ ${rule.label}</div>`
: `<div class="invalid">✖ ${rule.label}</div>`;
});
feedback.innerHTML = messages.join('');
// Strength meter
const strength = checkPasswordStrength(password);
strengthLevel.className = `strength-level ${strength}`;
});
confirmInput.addEventListener('input', function () {
if (confirmInput.value === passwordInput.value) {
matchFeedback.textContent = '✔ Passwords match';
matchFeedback.className = 'match valid';
} else {
matchFeedback.textContent = '✖ Passwords do not match';
matchFeedback.className = 'match invalid';
}
});
form.addEventListener('submit', function (e) {
if (passwordInput.value !== confirmInput.value) {
e.preventDefault();
alert("Passwords do not match!");
}
});
</script>
</body>
</html>
✅ Features Included
-
Live feedback on password rules (green/red indicators)
-
Password strength bar (weak, medium, strong)
-
Password match validation
-
HTML5
patternattribute ensures native enforcement on submit
Tips
-
✅ You can color the strength meter with gradient or emojis for fun UX.
-
✅ Store passwords using bcrypt or Argon2 on the server, not in plain text.
-
✅ Make the confirmation field optional unless required by your flow.
⚠️ Common Pitfalls
-
❌ Don’t rely on JavaScript-only validation—always validate on the server.
-
❌ Avoid storing passwords in browser
localStorageorsessionStorage. -
❌ Don’t make password strength too aggressive—users may abandon the form.
Conclusion
Combining HTML5, regex, and JavaScript gives you a powerful toolset for creating secure, user-friendly password forms. With live validation, a strength meter, and confirmation fields, users are more likely to create secure and valid credentials.
Would you like to add a toggle to show/hide password next for usability?
