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

Question

使用具有新类型(电子邮件,网址等)的HTML5表单,我已使用JS函数绑定了提交事件.

问题是浏览器首先调用此函数,然后调用其验证系统,但仅当submit函数未返回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,它可以修复不同浏览器中的这个问题和其他问题.