IE - How to disable validation detection from input after submitting the form?

I have an input that asks a user to enter a valid e-mail, then I clear the input on submit.
The problem happens in IE that, if a user submitted an invalid email once, the detection feedback (red border) still exists even after a valid email has been submitted, because the input has been cleared.
Is there any way to stop the validation after a valid input is submitted?

const form = document.querySelector('form');
const input = document.querySelector('input');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  /*
    stuff to do with the email
  */
  input.value = '';
})
<form>
  <input type="email" required>
  <button type="submit">submit</button>
</form>

2 answers

  • answered 2018-11-08 08:18 Baksteen

    I found it! looks like this can be done using CSS :)

    It looks like Firefox adds a custom pseudo class to add a box-shadow to the input element, you can disable that as well.

    I've made this JSFiddle. My IE11 shows the "This is a required field" message, but doesn't show the red border

    const form = document.querySelector('form');
    const input = document.querySelector('input');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      /*
        stuff to do with the email
      */
      input.value = '';
    })
    /* Firefox */
    input:-moz-ui-invalid{
      box-shadow:none;
    }
    
    /* Internet Explorer */
    input:invalid{
        outline:none;
    }  
    <form>
      <input type="email" required>
      <button type="submit">submit</button>
    </form>

  • answered 2018-11-08 08:24 schellmax

    instead of clearing the input manually, you can simply reset the form after submitting:

    const form = document.querySelector('form');
    const input = document.querySelector('input');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      /*
        stuff to do with the email
      */
      //input.value = '';
      form.reset();
    })
    <form>
      <input type="email" required>
      <button type="submit">submit</button>
    </form>