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

Question

使用带有新类型的HTML5表单（电子邮件，网址等），我已使用JS函数绑定了提交事件。

问题是浏览器首先调用此函数，然后调用其验证系统，但仅当提交函数未返回false 。

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

如何在调用submit js函数之前启用浏览器验证？

感谢您的帮助。

Answer 1

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

目前Opera首先触发提交事件，然后进行验证。您只需使用checkValidity-method：

手动调用提交侦听器内的验证

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

注意：这也会使这些浏览器中的无效事件变得更加复杂。如果你不使用它们，evrything应该没问题。如果你想使用它们并且不希望它们变得麻烦，你可以使用webshims lib，它可以在不同的浏览器中解决这个问题和其他问题。