So I am creating a signup form and I added password validation to make sure that both the password and confirm passwords match. The idea here is that while you initially type in your password, you are getting a "Passwords do NOT match".
This is because you have not reentered your password in the confirm password input. Once you reenter it, and if it matches, then it should say Passwords match!. If it still does not match, the message should still say Passwords do NOT match.
The issue that I am having is that when the passwords do match initially, the message does not change to Passwords match it stays at Passwords do NOT match.
In order to get it to match, I have to go back to the password input, add a character, or remove a character, and then do the same for the confirm password. I have provided my code in the code snippet so that you can get a better visual of my explanation.
Does anyone know why this may be happening?
var passConfirm = function() {
if (document.getElementById(Password).value ==
document.getElementById(ConfirmPassword).value) {
document.getElementById(Message).style.color = Green;
document.getElementById(Message).innerHTML = Passwords match!
} else {
document.getElementById(Message).style.color = Red;
document.getElementById(Message).innerHTML = Passwords do NOT match!
}
}<div class=container>
<form class=form onsubmit=validateForm(event)>
<div>
<label id=FullNameLabel>Full Name</label></br>
<input
type=text
placeholder=John Doe
id=FullName>
</input>
</div>
<div>
<label id=EmailLabel>Email</label></br>
<input
type=text
[email protected]
id=Email>
</input>
</div>
<div>
<label id=PhoneNumberLabel>Phone Number</label></br>
<input
type=text
placeholder=(123) 456-7890
id=PhoneNumber>
</input>
</div>
<div>
<label id=PasswordLabel>Password</label></br>
<input
name=Password
id=Password
type=password
placeholder=Password
onkeyup='passConfirm();'>
</input>
</div>
<div>
<label id=ConfirmPswdLabel>Confirm Password</label></br>
<input
type=password
placeholder=Confirm Password
id=ConfirmPassword></input>
</div>
<span id=Message></span>
</form>
<button type=submit value=submit>Sign Me Up!</button>
</div>
