HTML5 required attribute not working with AJAX submission

Question

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.

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?

<form action="" method="POST" id="newsletter-form">
    <input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" required>
    <input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&nbsp'>
</form>

$("#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.
        }
    });
});

Solution

The reason is because the validation is done on the submit event of the form, yet you have hooked your event to the click of the submit button. Try this:

$("#newsletter-form").on("submit", function (event) {
    event.preventDefault();
    // your code...
});

Working example

With regard to validating a minimum input length, you can use the pattern attribute:

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" pattern=".{3,}" required>

Comments

[Paul]

Great, thank you! If my memory serves me correctly. The required attribute doesn't work for Safari, right? If this is the case, what would you recommend for a back-up or would you recommend doing something completely different.

[Rory McCrossan]

You're right, required (and pattern too) don't work in Safari. It's quickly turning in to this decades' Internet Explorer. As a workaround I would suggest using jQuery validate as you already have jQuery included in the page.

[Paul]

I have jQuery validate other places, I just don't like the flexibility with the error class. I do not have much room under my input as this is within my footer, so I wouldn't know what to do to make it stand out.