Estoy tratando de hacer una validación básica para un formulario de boletín informativo simple que solo requiere un correo electrónico. De la forma en que tengo este formulario/entrada dentro de la página, realmente no hay espacio para agregar ningún mensaje de error de validación de jQuery, por lo que estaba tratando de agregar un atributo requerido de HTML 5 simple, pero el formulario se envía independientemente de si está en blanco.

¿Cuál sería la mejor manera de agregar una validación simple a esto para que el formulario verifique una dirección de correo electrónico, se complete y tenga una longitud mínima de 4 caracteres?

 <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. } }); });