title: How to submit this form using AJAX without jQuery but pure Javascript
body: <p>I looked all over and all I could find was about jQuery.</p>
  
  <p>With much help from the great minds here at SO I've finally got my form validating (it's only client side right now, but that because it's an assignment). I need to now submit the form to a PHP file using AJAX.</p>
  
  <p>My requirements are to verify that it was called via AJAX, verify all required fields have values and return a success status including the server time it was processed.</p>
  
  <p><a href="http://jsfiddle.net/justinae/qZrgS/" rel="noreferrer">JSfiddle</a></p>
  
  <p>The form action is empty right now for testing but will eventually call form.php with the code below.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post"&gt;
      &lt;div&gt;
          &lt;label&gt;First Name&lt;/label&gt;
          &lt;input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus /&gt;
          &lt;div id="name-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;Nickname&lt;/label&gt;
          &lt;input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus /&gt;
          &lt;div id="email-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;Phone&lt;/label&gt;
          &lt;input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus /&gt;
          &lt;div id="phone-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;I prefer&lt;/label&gt;
          &lt;input type="radio" name="pet" id="Dogs" tabindex="5" autofocus /&gt;Dogs
          &lt;input type="radio" name="pet" id="Cats" tabindex="6" autofocus /&gt;Cats
          &lt;input type="radio" name="pet" id="Neither" tabindex="7" autofocus /&gt;Neither
          &lt;div id="pet-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;My favorite number between 1 and 50&lt;/label&gt;
          &lt;input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus /&gt;
          &lt;div id="number-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;Disclaimer&lt;/label&gt;
          &lt;input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus /&gt;I confirm that all the above information is true.
          &lt;div id="disclaimer-error" class="error"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;button type="submit" name="submit" id="submit" tabindex="10"&gt;Send&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function validateFormOnSubmit(contact) {
      reason = "";
      reason += validateName(contact.name);
      reason += validateEmail(contact.email);
      reason += validatePhone(contact.phone);
      reason += validatePet(contact.pet);
      reason += validateNumber(contact.number);
      reason += validateDisclaimer(contact.disclaimer);
  
      console.log(reason);
      if (reason.length &gt; 0) {
  
          return false;
      } else {
          return false;
      }
  }
  
  // validate required fields
  function validateName(name) {
      var error = "";
  
      if (name.value.length == 0) {
          name.style.background = 'Red';
          document.getElementById('name-error').innerHTML = "The required field has not been filled in";
          var error = "1";
      } else {
          name.style.background = 'White';
          document.getElementById('name-error').innerHTML = '';
      }
      return error;
  }
  
  // validate email as required field and format
  function trim(s) {
      return s.replace(/^\s+|\s+$/, '');
  }
  
  function validateEmail(email) {
      var error = "";
      var temail = trim(email.value); // value of field with whitespace trimmed off
      var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
      var illegalChars = /[\(\)\&lt;\&gt;\,\;\:\\\"\[\]]/;
  
      if (email.value == "") {
          email.style.background = 'Red';
          document.getElementById('email-error').innerHTML = "Please enter an email address.";
          var error = "2";
      } else if (!emailFilter.test(temail)) { //test email for illegal characters
          email.style.background = 'Red';
          document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
          var error = "3";
      } else if (email.value.match(illegalChars)) {
          email.style.background = 'Red';
          var error = "4";
          document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
      } else {
          email.style.background = 'White';
          document.getElementById('email-error').innerHTML = '';
      }
      return error;
  }
  
  // validate phone for required and format
  function validatePhone(phone) {
      var error = "";
      var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');
  
      if (phone.value == "") {
          document.getElementById('phone-error').innerHTML = "Please enter a phone number";
          phone.style.background = 'Red';
          var error = '6';
      } else if (isNaN(parseInt(stripped))) {
          var error = "5";
          document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
          phone.style.background = 'Red';
      } else if (stripped.length &lt; 10) {
          var error = "6";
          document.getElementById('phone-error').innerHTML = "The phone number is too short.";
          phone.style.background = 'Red';
      } else {
          phone.style.background = 'White';
          document.getElementById('phone-error').innerHTML = '';
      }
      return error;
  }
  
  function validatePet(pet) {
      if ((contact.pet[0].checked == false) &amp;&amp; (contact.pet[1].checked == false) &amp;&amp; (contact.pet[2].checked == false)) {
          document.getElementById('pet-error').innerHTML = "Pet required";
          var error = "2";
      } else {
          document.getElementById('pet-error').innerHTML = '';
      }
      return error;
  }
  
  function validateNumber(number) {
      var num = document.forms["contact"]["number"];
      var y = num.value;
      if (!isNaN(y)) {
  
          //alert('va');
  
          if (y &lt; 0 || y &gt; 50) {
              //Wrong
              number.style.background = 'Red';
              document.getElementById("number-error").innerHTML = "Must be between 0 and 50.";
              var error = "10";
          } else {
              //Correct
              number.style.background = 'White';
              document.getElementById("number-error").innerHTML = "";
          }
          return error;
      } else {
          document.getElementById("number-error").innerHTML = "Must be a number.";
          var error = "3";
      }
      return error;
  }
  
  function validateDisclaimer(disclaimer) {
      var error = "";
  
      if (document.getElementById("disclaimer").checked === false) {
          document.getElementById('disclaimer-error').innerHTML = "Required";
          var error = "4";
      } else {
          document.getElementById('disclaimer-error').innerHTML = '';
      }
      return error;
  }
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>&lt;?php
  $name = $_POST['name'];
  $email = $_POST['email'];
  $from = 'From: TangledDemo'; 
  $to = 'myemail@domain.com'; 
  $subject = 'Hello';
  $message = "This is a message.";
  
  if ($_POST['submit']) {              
      if (mail ($to, $subject, $message)) { 
          echo '&lt;p&gt;Your message has been sent!&lt;/p&gt;';
  } else { 
      echo '&lt;p&gt;Something went wrong, go back and try again!&lt;/p&gt;'; 
  } 
  }
  ?&gt;
  </code></pre>
  
  <p>thanks!</p>