title: HTML5 validation before ajax submit
body: <p>This should be simple, yet it's driving me crazy. I have an html5 form that I am submitting with ajax. If you enter an invalid value, there is a popup response that tells you so. How can I check that the entries are valid before I run my ajax submit? </p>
  
  <p>form:</p>
  
  <pre><code>&lt;form id="contactForm" onsubmit="return false;"&gt;
    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" name="name" id="name" required placeholder="Name" /&gt;
    &lt;label for="subject"&gt;Subject:&lt;/label&gt;
    &lt;input type="text" name="subject" id="subject" required placeholder="Subject" /&gt;
    &lt;label for="email"&gt;Email:&lt;/label&gt;
    &lt;input type="email" name="email" id="email" required placeholder="email@example.com" /&gt;
    &lt;label for="message"&gt;Message:&lt;/label&gt;
    &lt;textarea name="message" id="message" required&gt;&lt;/textarea&gt;
    &lt;input type="submit" id="submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>submit:</p>
  
  <pre><code>$('#submit').click(function(){
      var name = $("input#name").val();
      var subject = $("input#subject").val();
      var email = $("input#email").val();
      var message = $("input#message").val();
  
      var dataString = 'email=' + email + '&amp;message=' + message + '&amp;subject=' + subject + '&amp;name=' + name ; 
  
      $.ajax({
          url: "scripts/mail.php",
          type:   'POST',
          data: dataString,
          success: function(msg){
              disablePopupContact();
              $("#popupMessageSent").css("visibility", "visible");
          },
          error: function() {
              alert("Bad submit");
          }
      });
  });
  </code></pre>