Quick validation check on form

by Lloyd Atkinson

HTML

<form id="signup-form" method="post">
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the terms and conditions
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form>

JavaScript

var form = document.querySelector('#signup-form');


form.addEventListener('submit', function (event) {
	event.preventDefault();
  
  var firstName = form.elements[0];
  var lastName = form.elements[1];
  var agreedToTerms = form.elements[2];
  
  var filledOut =	firstName.length > 0
    && lastName.length > 0
    && agreedToTerms.checked === true;
    
  if (filledOut) {
  	return true;
  } else {
  	alert('Please fill in the form.');
    return false;
  }
})