javascript - HTML5 必需属性不适用于 AJAX 提交

Question

我正在尝试对我拥有的只需要一封电子邮件的简单时事通讯表格进行一些基本验证。我在页面中使用此表单/输入的方式，确实没有空间添加任何 jQuery 验证错误消息，因此我试图添加一个简单的 HTML 5 必需属性，但无论是否为空白，表单都会提交。

向此添加一些简单验证的最佳方法是什么，以便表单检查电子邮件地址、是否已填写且最小长度为 4 个字符？

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

Answer 1

原因是因为验证是在表单的 submit 事件上完成的，但您已将事件挂接到提交按钮的单击。试试这个:

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

Working example

关于验证最小输入长度，您可以使用pattern 属性:

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