如何从页面添加，删除或交换jQuery验证规则？ [英] How can I add, remove, or swap jQuery validation rules from a page?

问题描述

注意：

此问题涉及 jQuery的旧版本。 validate（）（版本1.5）。此插件现在提供了一个内置的解决方案： .rules（）应该使用的方法。对于需要维护无法升级到最新版本的jQuery和jQuery.validate（）的遗留站点的人，我将以原始形式保留此问题并回答其历史目的。

Note:
This question refers to a very old version of jQuery.validate() (version 1.5). This plugin now provides a built-in solution for doing this: the .rules() method that should be used instead. I'm leaving this question and answer in its original form for historical purposes for anyone who needs to maintain a legacy site that is unable to upgrade to the latest versions of jQuery and jQuery.validate().

我有一个表单可以切换哪些输入元素是可见的。我想验证仅表单上的可见元素。

I have a form that toggles what input elements are visible. I want to validate only the visible elements on the form.

我很难让它正常运行。我想禁用非可见元素的验证器，我似乎无法找到最佳方法。我可以理解任何对我的代码或我的方法可能出错的见解。

I'm having a hard time getting this to function correctly. I want to disable validators for non-visible elements and I can't seem to figure out the best way to do this. Any insight to what may be wrong with my code, or my approach would be appreciated.

当可见度被切换时，我尝试了一些事情：

When visibility is toggled, I've tried a few things:

• 调用 $（表格）。规则（删除）清除所有现有验证规则。这会引发未定义的JavaScript异常。


• 调用 $（form）。validation（... options ...）对于可见元素，希望这会覆盖规则。这只允许第一个经过验证的组工作。无法验证第二个面板。


• 在调用新的 validation（）方法之前解除对提交处理程序的绑定。这不符合我的想法。它会永久删除所有验证（貌似）并且表单无需验证即可提交。


• 使用 $清除验证对象.removeData（$（'form'）'在尝试再次调用验证器之前验证器'）。这也不起作用。


• 这是在ASP.NET站点中，因此使用多个< form /> 标签是不可能的，因为这会打破页面。

• Calling $("form").rules("remove") to clear all existing validation rules. This throws an "undefined" JavaScript exception.
• Calling $("form").validation(...options...) for the visible elements, hoping this would overwrite the rules. This only allows the first group that is validated to work. The second panel can not be validated.
• Unbinding the submit handler before calling the new validation() method. This didn't do what I would have thought. It removes all validation (seemingly) permanently and the form submits without validation.
• Clearing out the validation object with $.removeData($('form'), 'validator') before trying to call the validator again. This also doesn't work.
• This is in an ASP.NET site, so using multiple <form /> tags is out of the question since that would break the page.

我对如何使这项工作感到困惑。您可以在 http://jsbin.com/ucibe3 ，或在 http://jsbin.com进行编辑/ ucibe3 /修改 。我试图将其删除到只是导致错误的代码。

I'm sort of stumped on how I can make this work. You can see a complete working demo of what I have at http://jsbin.com/ucibe3, or edit it at http://jsbin.com/ucibe3/edit. I've tried to strip it down to just the code that causes the bug.

以下是我的代码的关键部分（上面使用）完整工作页面的链接）

Here are the key pieces of my code (use above links for complete working page)

HTML：

<td id="leftform">
    Left Form<br />
    Input 1: <input type="text" name="leftform_input1" /><br />
    Input 2: <input type="text" name="leftform_input2" /><br />
    <input type="submit" name="leftform_submit" value="Submit Left" />
</td>
<td id="rightform" style="visibility:hidden">
    Right Form<br />
    Input 1: <input type="text" name="rightform_input1" /><br />
    Input 2: <input type="text" name="rightform_input2" /><br />
    <input type="submit" name="rightform_submit" value="Submit Right" />
</td>

JavaScript：

JavaScript:

$('#toggleSwitch').click(function() {
    if ($('#leftform').css("visibility") !== "hidden") {
        $('#leftform').css("visibility", "hidden");
        $('#rightform').css("visibility", "visible");
        $('form').validate({
            rules: {
                rightform_input1: { required: true },
                rightform_input2: { required: true }
            },
            messages: {
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            }
        });
    } else {
        $('#rightform').css("visibility", "hidden");
        $('#leftform').css("visibility", "visible");
        $('form').validate({
            rules: {
                leftform_input1: { required: true },
                leftform_input2: { required: true }
            },
            messages: {
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            }
        });
    }
});

推荐答案

过时的通知： < br>
这个答案指的是 jQuery.validate（）插件（版本1.5）的极旧版本由于插件提供了解决此问题的官方API，现在已经过时了。有关当前的方法，请参阅 .rules（）文档解决这个问题我将这个答案保留为原则，以帮助任何必须维护无法升级到最新版本的jQuery和jQuery.validate（）的遗留站点的人。

Obsolete notice:
This answer refers to an extremely old version of the jQuery.validate() plugin (version 1.5) and is now obsolete as the plugin provides an official API for solving this problem. See the .rules() documentation for the current approach to solving this. I'm leaving this answer as-is to help anyone who must maintain a legacy site that is unable to upgrade to the latest versions of jQuery and jQuery.validate().

这使用了API中没有详细记录的验证器功能（我的意思是它根本没有记录），但是因为它是基本的一部分。验证器如何工作，即使它没有被记录也不太可能被删除。

This uses a feature of the validator that is not well documented in the API (and by this I mean it isn't documented at all), however since it is a fundamental part of how the validator works, it is not likely to be removed even if it is undocumented.

一旦你初始化了jQuery验证器，你就可以访问验证器对象了。再次通过调用您应用验证器的表单对象上的 validate（）方法。此验证器对象具有设置属性，该属性存储默认设置，并结合初始化时应用于它的设置。

Once you've initialized the jQuery validator, you can get access to the validator object again by calling the validate() method on the form object you applied the validator to. This validator object has a settings property, which stores the default settings, combined with the settings you applied to it in initialization.

假设我像这样初始化验证器：

Assuming I initialize the validator like this:

$('form').validate({
    rules: {
        leftform_input1: { required: true },
        leftform_input2: { required: true }
    },
    messages: {
        leftform_input1: "Field is required",
        leftform_input2: "Field is required"
    }
});

然后我可以通过执行以下操作从验证器中获取这些确切的设置：

I can then get those exact settings out of the validator by doing the following:

var settings = $('form').validate().settings;

然后我可以轻松使用此设置对象添加或删除表单的验证器。

I can then easily work with this settings object to add or remove validators for the form.

这是删除验证规则的方法：

This is how you would remove validation rules:

var settings = $('form').validate().settings;
delete settings.rules.rightform_input1;
delete settings.messages.rightform_input1;

这是你添加验证规则的方法：

And this is how you would add validation rules:

var settings = $('form').validate().settings;
settings.rules.leftform_input1 = {required: true};
settings.messages.leftform_input1 = "Field is required";

---

这是我的方案的可行解决方案题。我使用jQuery的 extend（）方法来覆盖规则和消息 validate 对象的属性，这是我在两个面板之间切换的方式。

---

Here is a working solution for the scenario in my question. I use jQuery's extend() method to overwrite the rules and messages properties of the validate object, which is how I toggle between the two panels.

$('#toggleSwitch').click(function() {
    var settings = $('form').validate().settings;
    var leftForm = $('#leftform');
    var rightForm = $('#rightform');

    if (leftForm.css("visibility") !== "hidden") {
        leftForm.css("visibility", "hidden");
        rightForm.css("visibility", "visible");
        $.extend(settings, {
            rules: {
                rightform_input1: { required: true },
                rightform_input2: { required: true }
            },
            messages: {
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            }
        });
    } else {
        rightForm.css("visibility", "hidden");
        leftForm.css("visibility", "visible");
        $.extend(settings, {
            rules: {
                leftform_input1: { required: true },
                leftform_input2: { required: true }
            },
            messages: {
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            }
        });
    }
});

这篇关于如何从页面添加，删除或交换jQuery验证规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！