I need assistance in creating a code that can determine the length of a password and change the color of an error message accordingly. For example, if the password is less than 4 characters, it should display in red; if 8 characters, yellow; and if 12 characters, green.
Here is my initial code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function checkPasswordLength(password){
if (password.length > 12) {
document.getElementById("errorSpan").innerHTML = "Limit is 12 characters";
}
else {
document.getElementById("errorSpan").innerHTML = "";
}
}
</script>
</head>
<body>
<form>
<input type="password" name="pwd"onchange='checkPasswordLength(this.value)'>
<span id="errorSpan" style="color:red;"></span>
</div>
</form>
</body>
</html>