JAVASCRIPT

javaScript disable submit button until form is fully validated

function fieldValidation() {

var name = document.forms['RegForm']['Name'].value;
var address = document.forms['RegForm']['Address'].value;
var email = document.forms['RegForm']['EMail'].value;
var password = document.forms['RegForm']['Password'].value;
var telephone = document.forms['RegForm']['Telephone'].value;
var job = document.forms['RegForm']['Job'].value;
var comment = document.forms['RegForm']['Comment'].value;
var fullName = /^[a-zA-Z]+ [a-zA-Z]+$/;
var phnFormat = /(((d{3}) ?)|(d{3}-))?d{3}-d{4}/;

if (name === '') {
  alert('Please enter your name.'); 
  return false;
}

if (!fullName.test(name)) {
  alert('Please make sure we have your full name.');
  return false;
}

if (address === '') { 
  alert('Please enter your address.'); 
  return false; 
} 

if (email === '') { 
  alert('Please enter your e-mail address.'); 
  return false; 
} 

if (password === '') { 
  alert('Please enter a password.'); 
  return false; 
}   

if (telephone === '') { 
  alert('Please enter your telephone number.'); 
  return false; 
}

if (!phnFormat.test(telephone)) {
  alert('Please enter your phone number in the following format: (123) 555-1212)');
  return false;
}

if (job.value === '') { 
  alert('Please select a job choice.'); 
  return false; 
} 

if (comment.value === '') { 
  alert('Please enter a comment.'); 
  return false; 
}
  return true;
}

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;
    }
  })
})