title: HTML5 required attribute not working with AJAX submission
body: <p>I am trying to do some basic validation for a simple newsletter form I have that only requires an email. The way I have this form/input within the page, there really isn't room to add any jQuery validate error messages, so I was trying to add a simple HTML 5 required attribute, but the form submits regardless if blank.</p>
  
  <p>What would be the best way to add some simple validation to this so the form checks for an email address, it is filled in, and min length of 4 characters?</p>
  
  <pre><code>&lt;form action="" method="POST" id="newsletter-form"&gt;
      &lt;input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" required&gt;
      &lt;input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&amp;nbsp'&gt;
  &lt;/form&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$("#footer-grid1-newsletter-submit").on("click", function (event) {
      event.preventDefault();
      var newsletter_email = $("#footer-grid1-newsletter-input").val();
      var targeted_popup_class = jQuery(this).attr('data-popup-open');
      $.ajax({ 
          url: "newsletterSend.php", 
          type: "POST",
          data: {
              "newsletter_email": newsletter_email
          },
          success: function (data) {
              //  console.log(data); // data object will return the response when status code is 200
              if (data == "Error!") {
                  alert("Unable to insert email!");
                  alert(data);
              } else {
                  $("#newsletter-form")[0].reset();
                  $('.newsletter-popup').fadeIn(350).delay(2000).fadeOut();
              }
          },
          error: function (xhr, textStatus, errorThrown) {
              alert(textStatus + " | " + errorThrown);
              //console.log("error"); //otherwise error if status code is other than 200.
          }
      });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/oreFX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oreFX.png" alt="enter image description here"></a></p>