title: Form validation issue with Ajax without refreshing the page
body: <p>I have two forms on my page and I'm hiding one <code>myForm</code> on submission to show other <code>otherForm</code> using ajax.</p>
  
  <p>For that, I need to execute the function <code>submit_form();</code> onclick. As this is being submitted without refreshing the page with jQuery and Ajax, if the fields are empty, the the form <code>myForm</code> will be hidden without sending the data.</p>
  
  <p>How can I prevent the form from hidding or validate it's fields before being submitted?</p>
  
  <p>This is my form:</p>
  
  <pre><code>&lt;form id="myForm" method="post"&gt;
   Name:    &lt;input name="name" id="name" type="text" /&gt;&lt;br /&gt;
   Email:   &lt;input name="email" id="email" type="text" /&gt;&lt;br /&gt;
  &lt;input class="newsletter" type="button" id="submitForm" value="Send" onclick="submit_form();"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the <code>submit_form</code> function:</p>
  
  <pre><code>function submit_form() {
      var values = {};
      $.each($('#myForm').serializeArray(), function(i, field) {
          values[field.name] = field.value;
      });
      $('#myForm').hide();
      $('#otherForm').show();
      var name = $("#name").val();
      var email = $("#email").val();
  
      $.post("submit.php", { name: name, email: email, },
      function(data) {
       $('#results').html(data);
      });
  }
  </code></pre>