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" placeholder="[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>Best Answer
The problem is that, you haven't added the onKeyUp event on the confirm password input. It works when you add. Also, use <input /> and not <input></input>.
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" /></div><div><label id="EmailLabel">Email</label></br><input type="text" placeholder="[email protected]" id="Email" /></div><div><label id="PhoneNumberLabel">Phone Number</label></br><input type="text" placeholder="(123) 456-7890" id="PhoneNumber" /></div><div><label id="PasswordLabel">Password</label></br><input name="Password" id="Password" type="password" placeholder="Password" onkeyup='passConfirm();' /></div><div><label id="ConfirmPswdLabel">Confirm Password</label></br><input type="password" placeholder="Confirm Password" id="ConfirmPassword" onkeyup='passConfirm();' /></div><span id="Message"></span></form><button type="submit" value="submit">Sign Me Up!</button></div>You've added onkeyup event handler to only Password input.
You should track value changes for both password inputs to see if they are matched.
So adding onkeyup='passConfirm();' to ConfirmPassword input will solve the problem.
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" placeholder="[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>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" /></div><div><label id="EmailLabel">Email</label></br><input type="text" placeholder="[email protected]" id="Email" /></div><div><label id="PhoneNumberLabel">Phone Number</label></br><input type="text" placeholder="(123) 456-7890" id="PhoneNumber" /></div><div><label id="PasswordLabel">Password</label></br><input name="Password" id="Password" type="password" placeholder="Password" onkeyup='passConfirm();' /></div><div><label id="ConfirmPswdLabel">Confirm Password</label></br><input type="password" placeholder="Confirm Password" id="ConfirmPassword" onkeyup='passConfirm();' /></div><span id="Message"></span></form><button type="submit" value="submit">Sign Me Up!</button></div> 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" placeholder="[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>