Add Keyup to JS validation form

Question

in my simple form, I use this simple client-side validation. The validation start when I press SUBMIT (change style input and span of form).

How can I validate the input even when the user fills in the field without going through the SUBMIT?

---

STYLE

<style>
.msc-login-form-input {
    display: flex;
}
.msc-login-form-input.success > input {
  color: #3F4254;
  background-color: #ffffff;
}
.msc-login-form-input.errore > input {
    background-color: #4d40ff;
    color: #ffffff;    
}
.msc-login-form-input.errore > input::-webkit-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input:-ms-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input::placeholder {
  color: #ffffff;
}
.msc-login-form-input > span {
    width: 35px;
    background-color: rgba(0,0,0,0.05);
    min-height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.msc-login-form-input > span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f100";
}
.msc-login-form-input.success > span::before {
  content: "\f00c";
    color:#FF1493;
}
.msc-login-form-input.errore > span::before {
  content: "\f00d";
    color:#4d40ff;
}
</style>

---

HTML and JS This script checks the internal elements of the form. If, when I click on SUBMIT the fields are empty, then, it highlights the inputs with different styles and loads me different icons in the SPANs tag.

<form id="signinform" method="post" action="#" class="wp-user-form" autocomplete="off">
  <div class="msc-login-form-input">
    <input type="text" name="log" value="" id="user_login" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input">
    <input type="password" name="pwd" value="" id="user_pass" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input-sendh">
    <input type="submit" id="submit-login" name="submit-login" value="Submit" class="user-submit" />
  </div>
<script>
// ___________________________________________________________________
// validate contact form
const myform = document.getElementById('signinform');
myform.noValidate = true;

// custom form validation
myform.addEventListener('submit', validateForm);

// stop submission of valid form for demo
myform.addEventListener('submit', e => {
  
  e.preventDefault();

  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
  
});


// form validation
function validateForm(e) {

  const
    form = e.target,
    field = Array.from(form.elements);
  
  // reset fields
  field.forEach(i => {
    i.parentElement.classList.remove('errore');
    i.parentElement.classList.add('success');
  });
  
  if (!form.checkValidity()) {

    // form is invalid - cancel submit
    e.preventDefault();
    e.stopImmediatePropagation();

    // apply invalid class
    field.forEach(i => {

      if (!i.checkValidity()) {

        // field is invalid - add class
        i.parentElement.classList.add('errore');
        i.parentElement.classList.remove('success');
      }
    });
  }
}
</script>
</form>

---

Thanks

Answer 1

As per your comment. Instead of running validation again you can just add event listener that listens for Keydown (or Keyup) and then removes the class displaying the error.

const myform = document.getElementById("signinform");
myform.noValidate = true;

// custom form validation
myform.addEventListener("submit", validateForm);

// stop submission of valid form for demo
myform.addEventListener("submit", (e) => {
  e.preventDefault();

  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ": " + value);
  }
});

// form validation
function validateForm(e) {
  const form = e.target,
    field = Array.from(form.elements);

  // reset fields
  field.forEach((i) => {
    i.parentElement.classList.remove("errore");
    i.parentElement.classList.add("success");
  });

  if (!form.checkValidity()) {
    // form is invalid - cancel submit
    e.preventDefault();
    e.stopImmediatePropagation();

    // apply invalid class
    field.forEach((i) => {
      if (!i.checkValidity()) {
        // field is invalid - add class
        i.parentElement.classList.add("errore");
        i.parentElement.classList.remove("success");
      }
    });
  }
}

//  remove the error class on Keydown input
const formInputs = document.querySelectorAll(".msc-login-form-input");
formInputs.forEach((input) => {
  input.addEventListener("keydown", () => {
    input.classList.remove("errore");
    input.classList.add("success");
  });
});

.msc-login-form-input {
  display: flex;
}
.msc-login-form-input.success > input {
  color: #3f4254;
  background-color: #ffffff;
}
.msc-login-form-input.errore > input {
  background-color: #4d40ff;
  color: #ffffff;
}
.msc-login-form-input.errore > input::-webkit-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input:-ms-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input::placeholder {
  color: #ffffff;
}
.msc-login-form-input > span {
  width: 35px;
  background-color: rgba(0, 0, 0, 0.05);
  min-height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
}
.msc-login-form-input > span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f100";
}
.msc-login-form-input.success > span::before {
  content: "\f00c";
  color: #ff1493;
}
.msc-login-form-input.errore > span::before {
  content: "\f00d";
  color: #4d40ff;
}

<form id="signinform" method="post" action="#" class="wp-user-form" autocomplete="off">
  <div class="msc-login-form-input">
    <input type="text" name="log" value="" id="user_login" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input">
    <input type="password" name="pwd" value="" id="user_pass" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input-sendh">
    <input type="submit" id="submit-login" name="submit-login" value="Submit" class="user-submit" />
  </div>
</form>

Also your script tags should not be inside the form. They should be at the bottom of your page or in the <head> using async.