HTML5的required属性在使用AJAX提交时无效

Question

我正在为一个简单的新闻通讯表单做一些基本验证，该表单只需要电子邮件。由于页面中有这个表单/输入的方式，实际上没有空间添加任何jQuery验证错误消息，因此我尝试添加一个简单的HTML 5 required属性，但是即使空白，表单仍然提交。

最好的方法是什么，以便为此添加一些简单的验证，以便表单检查电子邮件地址、是否填写，并且最小长度为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.
        }
    });
});

- Paul

---

因为按钮的Ajax调用与表单提交无关。浏览器不知道Ajax调用与表单有关。您需要询问表单是否有效或绑定到提交事件，而不是按钮单击。 - epascarello

如果用户使用键盘提交，那么绑定到按钮的操作可以很容易地被绕过。 - charlietfl

@charlietfl，您是指将我的按钮ID放在我的ajax点击函数中，对吗？$（“#footer-grid1-newsletter-submit”）.on（“click”，function（event）{。那么，我应该总是绑定我的表单吗？ - Paul

不完全正确... 如果用户在键盘上按下 Enter 键，表单的提交事件会触发，但不会点击按钮。忘记按钮吧。 - charlietfl

@charlietfl 明白了！好建议。谢谢！ - Paul

Answer 1

原因是因为验证是在表单的submit事件上完成的，但您已将事件挂钩到提交按钮的点击上。尝试这样做：

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

工作示例

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

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

- Rory McCrossan

---

太好了，谢谢！如果我没记错的话，required属性在Safari上不起作用，对吧？如果是这样，你会推荐什么备选方案，或者你会建议完全采用不同的方法。 - Paul

你说得对，required（以及pattern）在Safari中不起作用。它很快就会变成本十年的Internet Explorer。作为解决方法，我建议使用jQuery validate，因为你已经在页面中包含了jQuery。 - Rory McCrossan

我在其他地方使用了jQuery验证，但我不喜欢错误类的灵活性。由于这是在我的页脚中，我在输入框下面没有太多的空间，所以我不知道该怎么做才能使其突出。 - Paul