jQuery Validate-至少需要填充一组字段

Question

我正在使用出色的jQuery Validate插件来验证某些表单。在一个表单上，我需要确保用户填写一组字段中的至少一个。我认为我有一个很好的解决方案，并希望与大家分享。 请提出您可以想到的任何改进。我没有找到任何内置方法来执行此操作，因此搜索并找到了Rebecca Murphey的自定义验证方法，该方法非常有帮助。我通过三种方式对此进行了改进：让您传递一组字段的选择器为了让您指定必须填充多少组才能通过验证一旦其中一个输入通过验证，就将该组中的所有输入显示为通过验证。（请参阅对尼克·克雷弗大喊大叫。）因此，您可以说“必须至少填充与选择器Y匹配的X个输入”。最终结果，像这样的标记：<input class="productinfo" name="partnumber"><input class="productinfo" name="description">...是这样的一组规则：// Both these inputs input will validate if // at least 1 input with class 'productinfo' is filledpartnumber: {   require_from_group: [1,".productinfo"]  }description: {   require_from_group: [1,".productinfo"]}项＃3假设您.checked在成功验证后将一类错误消息添加到错误消息中。您可以按照以下说明进行操作，如此处所示。success: function(label) {          label.html(" ").addClass("checked"); }如同上面链接的演示中一样，我使用CSS为每个span.errorX图像提供背景，除非它具有class .checked，在这种情况下，它会得到一个选中标记图像。

Answer 1

这是Nathan的出色解决方案。非常感谢。

这是一种使上面的代码起作用的方法，以防有人像我那样在集成时遇到麻烦：

Additional-methods.js文件中的代码：

jQuery.validator.addMethod("require_from_group", function(value, element, options) {

...// Nathan's code without any changes

}, jQuery.format("Please fill out at least {0} of these fields."));

// "filone" is the class we will use for the input elements at this example

jQuery.validator.addClassRules("fillone", {

    require_from_group: [1,".fillone"]

});

html文件中的代码：

<input id="field1" class="fillone" type="text" value="" name="field1" />

<input id="field2" class="fillone" type="text" value="" name="field2" />

<input id="field3" class="fillone" type="text" value="" name="field3" />

<input id="field4" class="fillone" type="text" value="" name="field4" />

不要忘了包含Additional-methods.js文件！

Answer 2

不错的解决方案。但是，我遇到了其他必需规则不起作用的问题。对表单执行.valid（）对我来说解决了这个问题。

if(!$(element).data('being_validated')) {

  var fields = $(selector, element.form);

  fields.data('being_validated', true); 

  $(element.form).valid();

  fields.data('being_validated', false);

}

Answer 3

谢谢肖恩。这解决了我的代码忽略其他规则的问题。

我还做了一些更改，以使“请至少填写一个字段..”消息显示在单独的div中，而不是在每个字段之后显示。

放入表单验证脚本

showErrors: function(errorMap, errorList){

            $("#form_error").html("Please fill out at least 1 field before submitting.");

            this.defaultShowErrors();

        },

将此添加到页面中的某处

<div class="error" id="form_error"></div>

添加到require_from_group方法addMethod函数

 if(validOrNot){

    $("#form_error").hide();

}else{

    $("#form_error").show();

}

......

}, jQuery.format(" &nbsp;(!)"));