HTML5 required attribute not working with AJAX submission
<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>