Third page link: Enhanced Password Form with Confirmation and Strength Meter (HTML5 + JS + Regex)
Perfect! Let's now enhance the form with a "Show/Hide Password" toggle so users can view or hide their input while typing. This improves usability, especially on mobile or for users with visibility issues.
Add Show/Hide Password Toggle to Your Form
We’ll add a checkbox (or icon button) next to both password fields to toggle their visibility.
✅ Updated Full Example with Show/Hide Toggle
Here’s the enhanced form with:
-
Password rules validation
-
Strength meter
-
Confirmation matching
-
Show/Hide password toggles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password Validation with Toggle Visibility</title>
<style>
input {
padding: 8px;
width: 300px;
font-size: 14px;
margin-bottom: 6px;
}
.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;
}
.strength-level {
height: 100%;
transition: width 0.3s;
}
.weak { width: 33%; background: red; }
.medium { width: 66%; background: orange; }
.strong { width: 100%; background: green; }
.toggle-container {
font-size: 13px;
margin-bottom: 10px;
}
</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 class="toggle-container">
<input type="checkbox" id="togglePassword"> Show Password
</div>
<div id="feedback" class="feedback"></div>
<div class="strength">
Strength:
<div class="strength-bar">
<div id="strengthLevel" class="strength-level"></div>
</div>
</div><br>
<label for="confirmPassword">Confirm Password:</label><br>
<input type="password" id="confirmPassword" required><br>
<div class="toggle-container">
<input type="checkbox" id="toggleConfirm"> Show Confirm Password
</div>
<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 togglePassword = document.getElementById('togglePassword');
const toggleConfirm = document.getElementById('toggleConfirm');
const form = document.getElementById('signupForm');
// Password strength checker
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 <= 4) return 'medium';
return 'strong';
}
// Real-time password feedback
passwordInput.addEventListener('input', () => {
const password = passwordInput.value;
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' },
];
feedback.innerHTML = rules.map(rule =>
rule.regex.test(password)
? `<div class="valid">✔ ${rule.label}</div>`
: `<div class="invalid">✖ ${rule.label}</div>`
).join('');
const strength = checkPasswordStrength(password);
strengthLevel.className = `strength-level ${strength}`;
});
// Password match check
confirmInput.addEventListener('input', () => {
if (confirmInput.value === passwordInput.value) {
matchFeedback.textContent = '✔ Passwords match';
matchFeedback.className = 'match valid';
} else {
matchFeedback.textContent = '✖ Passwords do not match';
matchFeedback.className = 'match invalid';
}
});
// Prevent submit if passwords don't match
form.addEventListener('submit', e => {
if (passwordInput.value !== confirmInput.value) {
e.preventDefault();
alert('Passwords do not match!');
}
});
// Toggle show/hide password
togglePassword.addEventListener('change', () => {
passwordInput.type = togglePassword.checked ? 'text' : 'password';
});
toggleConfirm.addEventListener('change', () => {
confirmInput.type = toggleConfirm.checked ? 'text' : 'password';
});
</script>
</body>
</html>
✅ What’s New in This Version?
-
Show/Hide Password: Controlled by checkboxes using simple JS.
-
All Features Combined:
-
Regex-based rule feedback
-
Strength meter bar
-
Password matching
-
HTML5 validation
-
JS fallback enforcement
-
Tips
-
You can replace the checkboxes with ????️ icon buttons for better UX.
-
For accessibility, always associate toggles with labels.
-
Style the toggle section consistently with the input fields.
⚠️ Common Pitfalls
-
❌ Not toggling both
type="password"andtype="text"properly. -
❌ Using only JS for critical validation—always validate server-side too.
-
❌ Forgetting to check password match before form submission.
Final Thoughts
This is a complete, secure, and user-friendly password form setup that you can drop into most web projects. It enhances the user experience without compromising security or browser support.
Would you like a version of this as a reusable component (e.g. React or Vue) or as part of a full registration page?
