那是个很好的解决办法内森。谢谢。

下面是一种使上述代码工作的方法,以防有人像我一样在集成时遇到问题:

内部代码 附加方法.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" />

别忘了包含额外的-methods.js文件!

很好的解决方案。但是,我有一个问题,就是其他规定的规则不起作用。对表单执行.valid()为我修复了此问题。

if(!$(element).data('being_validated')) {
  var fields = $(selector, element.form);
  fields.data('being_validated', true); 
  $(element.form).valid();
  fields.data('being_validated', false);
}

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

我还做了一些更改,以便“请至少填写1个字段…”消息显示在单独的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 method addmethod函数

 if(validOrNot){
    $("#form_error").hide();
}else{
    $("#form_error").show();
}
......
}, jQuery.format("  (!)"));

我已经提交了 patch 这不会受到当前版本所带来的问题的影响(即“Required”选项在其他字段上停止正常工作,关于当前版本的问题的讨论正在进行 github .

例 http://jsfiddle.net/f887W/10/

jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var validator = this;
var minRequired = options[0];
var selector = options[1];
var validOrNot = jQuery(selector, element.form).filter(function () {
    return validator.elementValue(this);
}).length >= minRequired;

// remove all events in namespace require_from_group
jQuery(selector, element.form).off('.require_from_group');

//add the required events to trigger revalidation if setting is enabled in the validator
if (this.settings.onkeyup) {
    jQuery(selector, element.form).on({
        'keyup.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.onfocusin) {
    jQuery(selector, element.form).on({
        'focusin.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.click) {
    jQuery(selector, element.form).on({
        'click.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.onfocusout) {
    jQuery(selector, element.form).on({
        'focusout.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

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

在php中,以$开头的变量名是必需的,但在javascript中却是非常奇怪的(imho)。另外,我相信你会把它称为“$module”两次和“module”一次,对吧?看来这段代码不应该起作用。

另外,我不确定这是否是正常的jquery插件语法,但我可能会在addmethod调用上方添加注释,解释您完成了什么。即使使用上面的文本描述,也很难遵循代码,因为我不熟悉fieldset、:filled、value、element或selector引用什么。对于熟悉validate插件的人来说,这可能是显而易见的,所以要判断什么是正确的解释。

也许你可以用一些变量来自我记录代码;比如,

var atLeastOneFilled = module.find(...).length > 0;
if (atLeastOneFilled) {
  var stillMarkedWithErrors = module.find(...).next(...).not(...);
  stillMarkedWithErrors.text("").addClass(...)

(假设我真的理解了这些代码块的含义!:)

我不太清楚“module”到底是什么意思——你能给这个变量起个更具体的名字吗?

总的来说,代码不错!

因为我正在处理的表单有几个克隆的区域,这些区域的输入是分组的,所以我向require_from_group构造函数传递了一个额外的参数,只更改了addMethod函数的一行:

var commonParent = $(element).parents(options[2]);

这样,选择器、id或元素名就可以传递一次:

jQuery.validator.addClassRules("reqgrp", {require_from_group: [1, ".reqgrp", 'fieldset']});

验证器会将验证限制为每个字段集中只有该类的元素,而不是尝试计算表单中所有.reqgrp类元素。

这是我对rocket hazmat答案的破解,试图解决其他定义字段也需要验证的问题,但在成功填充一个字段时将所有字段标记为有效。

jQuery.validator.addMethod("require_from_group", function(value, element, options){
    var numberRequired = options[0],
    selector = options[1],
    $fields = $(selector, element.form),
    validOrNot = $fields.filter(function() {
        return $(this).val();
    }).length >= numberRequired,
    validator = this;
    if(!$(element).data('being_validated')) {
        $fields.data('being_validated', true).each(function(){
            validator.valid(this);
        }).data('being_validated', false);
    }
    if (validOrNot) {
    $(selector).each(function() {
            $(this).removeClass('error');
            $('label.error[for='+$(this).attr('id')+']').remove();
        });
    }
    return validOrNot;
}, jQuery.format("Please fill out at least {0} of these fields."));

现在唯一剩下的问题是边的情况,字段是空的,然后填充,然后再次空…在这种情况下,错误将应用于单个字段而不是组。但这似乎不太可能以任何频率发生,在这种情况下,技术上仍然有效。

我对其他没有与此相关联的规则有问题,因此我更改了:

fields.valid();

对此:

var validator = this;
fields.each(function(){
   validator.valid(this);
});

我还做了一些(个人)改进,这是我正在使用的版本:

jQuery.validator.addMethod("require_from_group", function(value, element, options){
    var numberRequired = options[0],
    selector = options[1],
    $fields = $(selector, element.form),
    validOrNot = $fields.filter(function() {
        return $(this).val();
    }).length >= numberRequired,
    validator = this;
    if(!$(element).data('being_validated')) {
        $fields.data('being_validated', true).each(function(){
            validator.valid(this);
        }).data('being_validated', false);
    }
    return validOrNot;
}, jQuery.format("Please fill out at least {0} of these fields."));

谢谢,内森。你帮我省了很多时间。

但是,我必须注意到这个规则还没有jquery.noconflict()就绪。因此,必须用jquery替换所有的$ var $j = jQuery.noConflict()

我有一个问题:我如何让它表现得像内置规则?例如,如果我输入email,则消息“please enter valid email”将自动消失,但如果我填写组字段之一,则错误消息将保留。