在 jQuery 验证插件中自定义事件委托

发布于 2024-08-31 08:37:24 字数 630 浏览 3 评论 0原文

我目前正在设置 jQuery 验证插件以在我们的项目中使用。

默认情况下,会自动设置一些事件来进行处理。即焦点输入/输出、所有输入火验证上的按键事件。我希望它仅在单击提交按钮时触发。

此功能似乎内置于插件中,这使得很难做到这一点(不修改插件代码,不是我想要做的)。

我在插件代码原型方法中找到了 eventDelegate 函数调用:

        $(this.currentForm)
            .validateDelegate(":text, :password, :file, select, textarea", "focusin focusout keyup", delegate)
            .validateDelegate(":radio, :checkbox, select, option", "click", delegate);

当我从插件中删除这些行时,我得到了结果,但是我宁愿在插件之外做一些事情来实现这一点。

有人可以帮我吗?如果您需要更多详细信息,请告诉我。我用谷歌搜索但收效甚微。

谢谢

编辑: 我基本上试图仅在提交事件被触发时验证表单。默认情况下,每次焦点在输入控件中丢失时,插件都会进行验证。

I am currently setting up the jQuery validation plug-in for use in our project.

By default, there are some events automatically set up for handling. I.e. focus in/out, key up events on all inputs fire validation. I want it to only fire when the submit button is clicked.

This functionality seems to be in-built into the plug-in, which is making it difficult to do this (without modifying the plug-in code, Not What I Want To Do).

I have found the eventDelegate function calls in the plugin code prototype method:

        $(this.currentForm)
            .validateDelegate(":text, :password, :file, select, textarea", "focusin focusout keyup", delegate)
            .validateDelegate(":radio, :checkbox, select, option", "click", delegate);

When I remove these lines from the plug-in I get my result, however I would much rather do something Outside the plug-in to achieve this.

Can anybody please help me? If you need any more details, please let me know. I have searched google with little success.

Thanks

EDIT:
I am basically trying to validate the form Only when the submit event is fired. By default, the plug-in validates every time focus is lost in an input control.

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

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

发布评论

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

评论(1

对你而言 2024-09-07 08:37:24

找到了答案。它作为验证方法中选项的一部分(隐藏?)。

请参阅本页上的 onfocusout 等选项:
http://docs.jquery.com/Plugins/Validation/validate#options

我可以将其设置为 false。

这是我设置验证器的代码(希望其他人会发现这很有用):

$(document).ready(function() {
    $("form").each(function() {
        $(this).validate({
            validateDelegate: function() { },
            onsubmit: true,
            onkeydown: false,
            onkeyup: false,
            onfocusin: false,
            onfocusout: false,

            errorContainer: "#PanelError",
            errorLabelContainer: "#PanelError ul",
            wrapper: "li",
            ignoreTitle: true,
            errorClass: "Error",

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element.form).find("#" + element.id)
                        .addClass(errorClass);
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("#" + element.id)
                        .removeClass(errorClass);
            }
        });
    });
});

Found the answer. It was (hidden?) away as part of the options in the validate method.

See the options onfocusout etc on this page:
http://docs.jquery.com/Plugins/Validation/validate#options

which I can set to false.

Here is my code which sets up my validator (hopefully others will find this useful):

$(document).ready(function() {
    $("form").each(function() {
        $(this).validate({
            validateDelegate: function() { },
            onsubmit: true,
            onkeydown: false,
            onkeyup: false,
            onfocusin: false,
            onfocusout: false,

            errorContainer: "#PanelError",
            errorLabelContainer: "#PanelError ul",
            wrapper: "li",
            ignoreTitle: true,
            errorClass: "Error",

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element.form).find("#" + element.id)
                        .addClass(errorClass);
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("#" + element.id)
                        .removeClass(errorClass);
            }
        });
    });
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文