After spending hours writing code for form validation and password strength checking, I encountered a roadblock. The form validates successfully, but the password strength indicator is not updating as expected. Despite double-checking the logic in my code snippet, the color of the bar remains unchanged when typing strong or weak passwords.
<!DOCTYPE html>
<html>
<head>
<style>
.strength-bar {
width: 100%;
height: 30px;
background-color: lightgrey;
border: 1px solid black;
margin: 10px 0;
}
/* CSS for the strength meter */
.strength-meter {
height: 100%;
background-color: green;
transition: width 0.5s;
}
/* CSS for a weak password */
.weak {
width: 33%;
background-color: red;
}
/* CSS for a strong password */
.strong {
width: 66%;
background-color: orange;
}
</style>
<script>
function validateForm() {
var password = document.forms["myForm"]["password"].value;
// Check if password contains at least one lowercase letter
if (!password.match(/[a-z]/)) {
alert("Error: Password must contain at least one lowercase letter!");
return false;
}
// Check if password contains at least one uppercase letter
if (!password.match(/[A-Z]/)) {
alert("Error: Password must contain at least one uppercase letter!");
return false;
}
// Check if password contains at least one number
if (!password.match(/[0-9]/)) {
alert("Error: Password must contain at least one number!");
return false;
}
// Check if password is at least 8 characters long
if (password.length < 8) {
alert("Error: Password must be at least 8 characters long!");
return false;
}
// If all checks pass, submit the form
return true;
}
</script>
</head>
<body>
<form name="myForm" action="nextpage.html" onsubmit="return validateForm();" oninput="checkPassword();" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<div class="strength-bar">
<div id="strength-meter" class="strength-meter"></div>
</div>
<br>
<input type="submit" value="Submit">
</form>
<script>
// Function to check the password strength
function checkPassword() {
// Get the password from the input field
var password = document.getElementById("password").value;
// Check if the password meets the requirements
var hasUppercase = /[A-Z]/.test(password);
var hasLowercase = /[a-z]/.test(password);
var hasNumber = /\d/.test(password);
var has8Chars = password.length >= 8;
// Set the strength meter width and color
var strengthMeter = document.getElementById("strength-meter");
if (hasUppercase && hasLowercase && hasNumber && has8Chars) {
// Strong password
strengthMeter.style.width = "66%";
strengthMeter.classList.remove("weak");
strengthMeter.classList.add("strong");
} else {
// Weak password
strengthMeter.style.width = "33%";
strengthMeter.classList.remove("strong");
strengthMeter.classList.add("weak");
}
}
</script>
</body>
</html>
I've reviewed the logic numerous times, yet the issue persists. It's puzzling why the color isn't changing when entering different types of passwords, only showing the green bar.