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

Question

注意:
此问题涉及jQuery.validate()(版本1.5)的非常旧版本.这个插件现在为这样做提供了一个内置的解决方案:应该使用的.rules()方法.对于需要维护无法升级到最新版本的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()文档以了解解决此问题的当前方法.我将离开这个答案,以帮助任何必须维护无法升级到最新版本的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'
    }
});