如何从页面添加、删除或交换 jQuery 验证规则？

Question

注意：
这个问题指的是jQuery.validate()（1.5版）的一个非常旧的版本。这个插件现在提供了一个内置的解决方案：应该使用.rules() method。对于需要维护无法升级到最新版本的 jQuery 和 jQuery.validate() 的旧网站的任何人，出于历史目的，我将保留此问题和答案的原始形式。

---

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

我很难让它正常运行。我想禁用不可见元素的验证器，但我似乎无法找出最好的方法来做到这一点。任何对我的代码或我的方法可能有问题的见解都将不胜感激。

切换可见性时，我尝试了一些方法：

• 调用$("form").rules("remove") 清除所有现有的验证规则。这会引发“未定义”的 JavaScript 异常。
• 为可见元素调用$("form").validation(...options...)，希望这会覆盖规则。这仅允许经过验证的第一组工作。无法验证第二个面板。
• 在调用新的validation() 方法之前取消绑定提交处理程序。这并没有达到我的预期。它会永久（看似）删除所有验证，并且表单会在未经验证的情况下提交。
• 在尝试再次调用验证器之前使用$.removeData($('form'), 'validator') 清除验证对象。这也行不通。
• 这是在 ASP.NET 站点中，因此使用多个 <form /> 标记是不可能的，因为这会破坏页面。

我对如何完成这项工作感到有些困惑。您可以在http://jsbin.com/ucibe3 看到我所拥有的完整工作演示，或在http://jsbin.com/ucibe3/edit 进行编辑。我试图将其简化为只是导致错误的代码。

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

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：

$('#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"
            }
        });
    }
});

Answer 1

过时通知：
这个答案是指jQuery.validate() 插件（版本 1.5）的一个非常旧的版本，现在已经过时了，因为插件提供了一个官方 API 来解决这个问题。有关解决此问题的当前方法，请参阅.rules() documentation。我保留这个答案是为了帮助任何必须维护无法升级到最新版本的 jQuery 和 jQuery.validate() 的旧网站的人。

---

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

一旦你初始化了 jQuery 验证器，你可以通过在你应用了验证器的表单对象上调用 validate() 方法来再次访问验证器对象。这个验证器对象有一个settings 属性，它存储了默认设置，以及你在初始化时应用的设置。

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

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

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

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

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

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

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

这就是添加验证规则的方式：

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

---

这是我问题中场景的有效解决方案。我使用 jQuery 的extend() 方法覆盖validate 对象的rules 和messages 属性，这就是我在两个面板之间切换的方式。

$('#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"
            }
        });
    }
});

Answer 2

如果您想使用新设置（规则、消息...等）再次调用验证 打电话

$('#formid').removeData('validator')

这将删除表单的验证，然后使用新设置再次对其进行初始化

Answer 3

validate.rules 散列中的“必需”声明不必静态声明为“true”。您实际上可以提供一个匿名函数，它可以检查某物的可见性并根据答案返回真或假。

$('form').validate({
rules: {
  rightform_input1: { 
    required: function(){
              return $('#leftform').css("visibility") !== "hidden"
              } },
  rightform_input2: {
    required: function(){
              return $('#leftform').css("visibility") !== "hidden"
              } }
  }
});

Answer 4

$('#form_id').validate();//empty rules
//add rules/message to form element
$('#form_id #inputId').rules("add", {
    required        : true,                             
    messages        : {
        required    : 'Add your required message'
    }
});

Answer 5

我写了一个编辑规则的小函数（只需要）。

        $.editRules = function($array, $type) {
            var settings = $('#signupForm').validate().settings;
            $.each($array, function($k, $v) {
                settings.rules[$v] = {required: ($type == 'add' ? true : false)};
            });
        };

Answer 6

虽然还有其他方法可以做到这一点，但 ASP.net 确实允许您使用多个表单标签，只要它们没有全部呈现 - 所以如果您使用多视图仅显示相关内容，您可以使用多个表单。

它倾向于清理验证和提交处理。

---

另外，jquery 确实允许将 :visible 添加到您的选择器中，因此您可能只在可见元素上运行选择器，并根据它们的隐藏方式回避问题。

:visible 的计算方式在 jQuery 1.3.2 中发生了变化。如果元素及其父元素占用文档中的空间，则元素假定为可见。不考虑 CSS 可见性。发行说明更详细地概述了这些变化。

---

这是另一个关于堆栈溢出的帖子的更好/更简单的解决方案-

显然，验证插件允许您在规则中指定 :visible。这是帖子-

Advanced JQuery Validation: Avoiding Validations on Certain Conditions