Add Keyup to JS validation form-CodePudding

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="#"  autocomplete="off">
  <div >
    <input type="text" name="log" value="" id="user_login" placeholder="prova" required/>
    <span></span> </div>
  <div >
    <input type="password" name="pwd" value="" id="user_pass" placeholder="prova" required/>
    <span></span> </div>
  <div >
    <input type="submit" id="submit-login" name="submit-login" value="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

CodePudding user response：

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="#"  autocomplete="off">
  <div >
    <input type="text" name="log" value="" id="user_login" placeholder="prova" required/>
    <span></span> </div>
  <div >
    <input type="password" name="pwd" value="" id="user_pass" placeholder="prova" required/>
    <span></span> </div>
  <div >
    <input type="submit" id="submit-login" name="submit-login" value="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.