Question

我正在使用jquery验证来验证用于构建自定义评估的表单。形式上有多个部分，其中之一是个性。个性部分由10个不同维度组成。如果用户选择使用“个性”部分，则可以选择使用“部分”中的所有或某些维度。他们至少必须选择至少3个尺寸。

我正在使用jQuery Validate插件及其附加方法文件来使用require_from_group验证方法

当我对此进行测试时，所需的零件起作用了，但并没有使他们选择最少3个所需的尺寸

这是html

格式

<div class="col-xs-12 col-md-6">
    <input type="checkbox" name="Sections" value="Personality" id="Personality" onClick="displayPersonality(this.form)" /> <label for="Personality">Personality -- cost varies by number of dimensions chosen</label>
    <div id="persDimensions" class="radio-group" style="display:none">
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Energy" onclick="CountDims(this.form)" id="Energy" class="pick-three" /> <label for="Energy">Energy</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Flexibility" onclick="CountDims(this.form)" id="Flexibility" class="pick-three" /> <label for="Flexibility">Flexibility</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Organization" onclick="CountDims(this.form)" id="Organization" class="pick-three" /> <label for="Organization">Organization</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Communication" onclick="CountDims(this.form)" id="Communication" class="pick-three" /> <label for="Communication">Communication</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Development" onclick="CountDims(this.form)" id="Development" class="pick-three" /> <label for="Development">Emotional Development</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Assertiveness" onclick="CountDims(this.form)" id="Assertiveness" class="pick-three" /> <label for="Assertiveness">Assertiveness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Competitiveness" onclick="CountDims(this.form)" id="Competitieness" class="pick-three" /> <label for="Competitieness">Competitieness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Toughness" onclick="CountDims(this.form)" id="Toughness" class="pick-three" /> <label for="Toughness">Mental Toughness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Questioning" onclick="CountDims(this.form)" id="Questioning" class="pick-three" /> <label for="Questioning">Questioning/Probing</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Motivation" onclick="CountDims(this.form)" id="Motivation" class="pick-three" /> <label for="Motivation">Motivation</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Distortion" onclick="CountDims(this.form)" id="Distortion" class="pick-three" /> <label for="Distortion">Distortion</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="Equivocation" value="1" id="Equivocation" /> <label for="Equivocation">Equivocation</label></div>
        </div>
    </div>
</div>

这是我的验证码

$("#form").validate({
    rules: {
        PersonalityDimension:{
            require_from_group: function(element){
                if($('#Personality').is(':checked')){
                    return [3,".pick-three"] ;
                }
            }
        } 
    }
});

有什么想法为什么不需要选中其中三个复选框？

Answer 1

通常，就像您所做的那样，通常会在一组单选或复选框元素上使用相同的name属性。但是，require_from_group方法正在寻找具有不同名称的元素，并且该规则将被应用三个唯一的时间。您将在三个完全不同的输入元素上使用它，而不是在同一组中的三个复选框上使用。

这是有争议的，因为require_from_group不是针对您的情况而创建的。解决方案是仅使用minlength规则来强制执行最少数量的复选框。

<form id="myform">
    <div>
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
    </div>
    ....
</form>

JavaScript：

$('#myform').validate({
    rules: {
        foo: {  // name of my checkbox group
            required: true,  // at least one checkbox with this alone
            minlength: 3  // at least how many must be checked?
        }
    },
    messages: {
        foo: {
            minlength: "check at least {0}" // {0} automatically inserts parameter value
        }
    }
});

演示：jsfiddle.net/gmvck6oe/1/

组中至少要选中3个复选框

1 个答案: