HTMLFormElement.reportValidity() ignore "display:none" input fields

Question

I'm sending a form using an ajax call. When the user uses the submit button within the form, this calls a function sendForm(). The function prevents the default (submitting the form), and validates the form (for fields with required) and if the form is valid then makes the ajax call.

Problem is that the form contains some hidden (display:none) elements, which are validated using the resportValidity() call, and therefore the form fails because of the hidden elements, which should not be validated (they are displayed depending on the previous user options).

Below the sendForm() function used:

function sendForm(e) {
  $(e).preventDefault;

  var form = document.getElementById('myForm');

  if (form.reportValidity()) { 

      // form is valid, do ajax call..

  }else{

    alert("Form not valid");

  }
}

So when it does form.reportValidity() I get false because of "empty" required input fields from the inputs with display:none style.

How can I just reportValidity() the form elements without display:none? Thanks!

Answer 1

If you don't want an element to be included in the form when checking for validity, you should disable the element. At the time you set display: none you should also add the disabled attribute.

Documentation