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

发布于 2024-12-04 09:29:54 字数 232 浏览 0 评论 0原文

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

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

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

如何在调用 Submit js 函数之前执行浏览器验证?

感谢您的帮助。

Using an HTML5 form with new type (email, url, etc), I have binded the submit event with a JS function.

The problem is that the browser first call this function, and then call its validation system, but only if the submit function hasn't returned false.

Or, I do the Ajax request and all the work in that function, meaning I always return false.

How could I enable the browser validation to be executed before the call of the submit js function ?

Thanks for your help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

贱人配狗天长地久 2024-12-11 09:29:54

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

目前,Opera 首先触发提交事件,然后进行验证。您可以简单地使用 checkValidity-method 在提交侦听器内部手动调用验证:

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

注意:这也会使这些浏览器中的无效事件加倍。如果你不使用它们,一切都应该没问题。如果您想使用它们并且不希望它们重复,您可以使用 webshims lib< /a>,它修复了不同浏览器中的这个问题和其他问题。

From specification the browser should first validate the form and then, if the form is valid should trigger a submit event. This means, that you simply should be able to do your Ajax submit inside the submit event.

Currently Opera does first fire the submit event and then does the validation. You can simply call manually the validation inside of your submit listener, using checkValidity-method:

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

Note: that this can doubble the invalid events in those browsers, too. If you don't use them, evrything should be fine. If you want to use them and don't want them doubbled you can use webshims lib, which fixes this and other issues in different browsers.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文