Confirming Password is still displaying "Passwords do not match" even when passwords do match

Question

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="johndoe@email.com" 
                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>

Answer 1

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="johndoe@email.com" 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>