title: Send form via AJAX but only after validation returns true
body: <p>I have an <code>onsubmit</code> validation in my form which works, yet my ajax file is still making a http request.</p>
  
  <p>Here's the form:</p>
  
  <pre><code>&lt;form class="ajax" action="mecha.php" name="ajax" method="post" onsubmit="return answer_validate(document.forms.ajax);"&gt;
      &lt;input type="text" name="user_answer"&gt;
      &lt;input type="submit" class="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the validation function that is triggered <code>onsubmit</code>:</p>
  
  <pre><code>function answer_validate(f) { 
  
      if (f.user_answer.value.length &gt; 23 || f.user_answer.value.length &lt; 1) {
  
          document.getElementById("notice").innerHTML = "please input an answer";
  
      return false; 
      }
  
  return true;
  }
  </code></pre>
  
  <p>Finally here's the AJAX file that is sending the form (even if the validation function returns false, which is the problem!):</p>
  
  <pre><code>$('form.ajax').on('submit', function() {
  
  var that = $(this),
  url  = that.attr('action'),
  type = that.attr('method'),
  data = {};
  
  that.find('[name]').each(function(index, value) {
      var that  = $(this),
          name  = that.attr('name'),
          value = that.val();
          data[name] = value;
  });
  
  $.ajax({
      url : url,
      type: type,
      data: data,
      success: function(response) {
          $('.output').html(response);
      }
  
  });
  
  return false;
  });
  </code></pre>
  
  <p>So in summary, the form is validated with a <code>function</code> that returns either <code>true</code> or <code>false</code>. On submission the AJAX is still sending the form even when the validation returns false. Why is the AJAX still sending the form no matter what?</p>
  
  <p>I have tried this example without sending the form via AJAX and the <code>onsubmit</code> works as normal, (halting form submission until validation returns true).</p>
  
  <p>So what am I missing?</p>