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()方法来覆盖rules对象的messages和validate属性，这就是我在两个面板之间切换的方式。

$('#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散列中的“required”声明不必静态声明为“true”。您实际上可以提供一个匿名函数，它可以检查某些内容的可见性，并根据答案返回true或false。

$('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添加到您的选择器中，因此您可能只在可见元素上运行选择器，并根据它们的隐藏方式回避问题。

如何：在jQuery 1.3.2中更改了计算的可见性。如果元素和它的父母在文档中占用空间，则假定元素可见。不考虑CSS可见性。发行说明更详细地概述了这些变化。

这是关于堆栈溢出的另一篇文章的更好/更简单的解决方案 -

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

Advanced JQuery Validation: Avoiding Validations on Certain Conditions

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

6 个答案: