HTML

disable submit button after form validation

<form action="#" method="post" id="myform" name="myform">
    Location: <input name="location" type="text" />
    Site: <input name="site" type="text" />
    Age: <input name="age" type="text" />
    Gender <input name="gender" type="text" />
    <input name="button" type="submit" class="myButton" id="button" value="Submit" />
</form>

disable submit button until form is fully validated

let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');

//"name" parameter of input field: boolean if validated 
let inputValidator = {
  "username": false,
  "email": false,
  "password": false
}

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    let name = event.target.getAttribute('name');
    let regex = new RegExp(event.target.pattern || ".*");
    //if you specified a pattern for an input field it will check if the 
    //value matches it
    //if not it will match it with ".*" which stands for everything
    if (event.target.value.length > 0 && regex.test(event.target.value)) {
      inputValidator[name] = true;
    } else {
      inputValidator[name] = false;
    };

    let allTrue = Object.keys(inputValidator).every((item) => {
      return inputValidator[item] === true
    });

    if (allTrue) {
      buttonSend.disabled = false;
    } else {
      buttonSend.disabled = true;
    }
  })
})