Флажок Jquery Validate (хотя бы один для группы) в сложной форме

Question

У меня очень сложная форма с X группами флажков, подобными этим:

<div class="checkbox-block1">
 <input id="package-1-1" name="member[1][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
 <input id="package-1-2" name="member[1][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
 <input id="package-1-3" name="member[1][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>
<div class="checkbox-block2">
 <input id="package-2-1" name="member[2][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
 <input id="package-2-2" name="member[2][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
 <input id="package-2-3" name="member[2][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>

Мне нужно проверить форму с правилами, которые требуют хотя бы флажок для группы / блока.Я пытаюсь с:

      $(document).ready(function () {
            $("#myform-s3").validate({
                rules: {
                    'member[1]': {
                        required: true,
                        minlength: 1
                    },
                    'member[2]': {
                        required: true,
                        minlength: 1
                    },
                    'member[3]': {
                        required: true,
                        minlength: 1
                    }
                },
                errorPlacement: function(error, element) {
                    if ( element.is(':radio') || element.is(':checkbox') ) {
                        error.insertBefore( element.next() );
                    } else {
                        error.insertAfter( element );
                    }
                },
                submitHandler: function (form) { // for demo
                    alert('valid form');
                    return false;
                }
            });

Но я получил «Действительную форму» также, когда флажок не установлен.

PS: Количество блоков, выбранных пользователем впредыдущую форму, то я могу иметь 1, 2, 3 или более блоков флажков.

Answer 1

Ваш код ...

rules: {
    'member[1]': {  // <- MUST be the NAME of input element

member[1] - это не name ничего, поэтому ничего не произойдет.Здесь вы не можете использовать частичные имена или селекторы, только фактическое значение атрибута name.

---

Решение 1

Чтобы проверить группу флажков,вам нужно, чтобы все они разделяли одно и то же name ...

<div class="checkbox-block1">
    <input id="package-1-1" name="member[1]" type="checkbox" class="checkbox" value="100" style="float: left;">
    <input id="package-1-2" name="member[1]" type="checkbox" class="checkbox" value="300" style="float: left;">
    <input id="package-1-3" name="member[1]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>

И тогда вы можете просто использовать правило required само по себе ...

$(document).ready(function () {
    $("#myform-s3").validate({
        rules: {
            'member[1]': {
                required: true
            }, ....

DEMO 1: https://jsfiddle.net/1an60fxy/

---

Решение 2

Если вы не можете изменить наименование, тогда вы должны динамически объявлять правила, используя .rules()Метод и «начинается с», ^=, селектор.

Не объявляйте правила в .validate() ...

$(document).ready(function () {
    $("#myform-s3").validate({
        rules: {
            // other fields maybe
        ....

Используйте метод .rules() с .each() и required_from_group правило.Обратите внимание, что required_from_group является частью файла additional-methods.js .

$('[name^="member[1]"]').each(function() {
    $(this).rules('add', {
        require_from_group: [1, $('[id^="package-1"]')]
    });
});

Где 1 - минимальное требуемое число для группы, а $('[id^="package-1"]') предназначено для всех членовgroup.

DEMO 2: jsfiddle.net / 1an60fxy / 2 /

В этой версии вы получите дублированные сообщения, которые вам понадобятсяручка с опцией groups .Поскольку ваша форма сложна и динамична, вам нужно будет динамически создать эту опцию, прежде чем вы вызовете .validate(). Вот пример .

var names1 = ""; // create empty string
$('[id^="package-1"]').each(function() { // grab each input starting w/ the class
    names1 += $(this).attr('name') + " "; // append each name + single space to string
});
names1 = $.trim(names1); // remove the empty space from the end

$("#myform-s3").validate({
    groups: {
        myGroup: names1 // reference the string
    }, 
    ....

DEMO 2b: jsfiddle.net / 1an60fxy / 3 /