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

【问题标题】：How to use browser validation on a form before submitting via Ajax?在通过 Ajax 提交之前如何在表单上使用浏览器验证？
【发布时间】：2011-11-16 08:42:17
【问题描述】：

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

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

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

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

感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

目前 Opera 确实首先触发提交事件，然后进行验证。您可以使用 checkValidity-method 在提交侦听器中手动调用验证：

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

注意：这也会使这些浏览器中的无效事件加倍。如果你不使用它们，一切都应该没问题。如果您想使用它们并且不希望它们加倍，您可以使用webshims lib，它可以解决不同浏览器中的这个问题和其他问题。

【讨论】：

不错。现在如何触发浏览器说什么字段无效以及为什么在没有ajax的情况下提交？ MDN 文档说“checkValidity”可以做到这一点，但不适合我..由于我的 ajax 事件触发所有类型的事件而不仅仅是提交，我必须以某种方式手动执行此操作..
我刚刚在这里回答了我自己的评论问题。所以，如果你不能在表单域上做你的 ajax 代码，这里就是答案：stackoverflow.com/a/53922759/301753