ajax - 如何在通过 Ajax 提交之前在表单上使用浏览器验证？

Question

使用具有新类型(电子邮件、url 等)的 HTML5 表单，我已将提交事件与 JS 函数绑定(bind)。

问题是浏览器首先调用这个函数，然后调用它的验证系统，但是只有在提交函数没有返回 false 的情况下。

或者，我执行 Ajax 请求和该函数中的所有工作，这意味着我总是返回 false。

如何在提交 js 函数调用之前执行浏览器验证？

感谢您的帮助。

Answer 1

根据规范，浏览器应首先验证表单，然后，如果表单有效，则应触发提交事件。这意味着，您应该能够在提交事件中执行 Ajax 提交。

目前 Opera 会先触发提交事件，然后再进行验证。您可以使用 checkValidity 方法简单地在提交监听器中手动调用验证:

$(form).bind('submit', function(){
    if(!this.checkValidity || this.checkValidity()){
        //do ajax and return false
    }
});

注意:这也会使这些浏览器中的无效事件加倍。如果你不使用它们，一切都应该没问题。如果你想使用它们而不想让它们加倍，你可以使用 webshims lib ，它修复了不同浏览器中的这个问题和其他问题。