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 filled

partnumber: {

   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 examplejQuery.validator.addClassRules("fillone", {&nbsp; &nbsp; 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')) {&nbsp; var fields = $(selector, element.form);&nbsp; fields.data('being_validated', true);&nbsp;&nbsp; $(element.form).valid();&nbsp; fields.data('being_validated', false);}

Answer 3

谢谢肖恩。这解决了我的代码忽略其他规则的问题。我还做了一些更改，以使“请至少填写一个字段..”消息显示在单独的div中，而不是在每个字段之后显示。放入表单验证脚本showErrors: function(errorMap, errorList){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#form_error").html("Please fill out at least 1 field before submitting.");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.defaultShowErrors();&nbsp; &nbsp; &nbsp; &nbsp; },将此添加到页面中的某处<div class="error" id="form_error"></div>添加到require_from_group方法addMethod函数&nbsp;if(validOrNot){&nbsp; &nbsp; $("#form_error").hide();}else{&nbsp; &nbsp; $("#form_error").show();}......}, jQuery.format(" &nbsp;(!)"));