title: Confirming Password is still displaying "Passwords do not match" even when passwords do match
body: <p>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 <strong>&quot;Passwords do NOT match&quot;</strong>.</p>
  <p>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 <strong>Passwords match!</strong>. If it still does not match, the message should still say <strong>Passwords do NOT match</strong>.</p>
  <p>The issue that I am having is that when the passwords do match initially, the message does not change to <strong>Passwords match</strong> it stays at <strong>Passwords do NOT match</strong>.</p>
  <p>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.</p>
  <p>Does anyone know why this may be happening?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  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!"
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;form class="form" onsubmit="validateForm(event)"&gt;
         &lt;div&gt;
              &lt;label id="FullNameLabel"&gt;Full Name&lt;/label&gt;&lt;/br&gt;
                &lt;input 
                  type="text" 
                  placeholder="John Doe" 
                  id="FullName"&gt;
              &lt;/input&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label id="EmailLabel"&gt;Email&lt;/label&gt;&lt;/br&gt;
               &lt;input 
                  type="text" 
                  placeholder="johndoe@email.com" 
                  id="Email"&gt;
              &lt;/input&gt;
           &lt;/div&gt;
           &lt;div&gt;
              &lt;label id="PhoneNumberLabel"&gt;Phone Number&lt;/label&gt;&lt;/br&gt;
               &lt;input 
                  type="text" 
                  placeholder="(123) 456-7890" 
                  id="PhoneNumber"&gt;
              &lt;/input&gt;
           &lt;/div&gt;
           &lt;div&gt;
              &lt;label id="PasswordLabel"&gt;Password&lt;/label&gt;&lt;/br&gt;
               &lt;input 
                  name="Password"
                  id="Password"
                  type="password" 
                  placeholder="Password"
                  onkeyup='passConfirm();'&gt;
              &lt;/input&gt;
           &lt;/div&gt;
           &lt;div&gt;
              &lt;label id="ConfirmPswdLabel"&gt;Confirm Password&lt;/label&gt;&lt;/br&gt;
               &lt;input 
                  type="password" 
                  placeholder="Confirm Password" 
                  id="ConfirmPassword"&gt;&lt;/input&gt;
           &lt;/div&gt;
           &lt;span id="Message"&gt;&lt;/span&gt;
        
      &lt;/form&gt;
        &lt;button type="submit" value="submit"&gt;Sign Me Up!&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>