как минимум 3 флажка в группе должны быть отмечены

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"] ;
                }
            }
        } 
    }
});

есть идеи, почему не нужно проверять 3 флажка?

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
        }
    }
});

DEMO : jsfiddle.net/gmvck6oe/1/