JQuery проверить флажок хотя бы один флажок

Question

У меня есть что-то вроде этого:

<form>
<input name='roles' type='checkbox' value='1' />
<input name='roles' type='checkbox' value='2' />
<input name='roles' type='checkbox' value='3' />
<input name='roles' type='checkbox' value='4' />
<input name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
<form>

Я хотел бы подтвердить, что должен быть проверен хотя бы один флажок (роли), возможно ли это с помощью jquery.validate?

Answer 1

Пример из https://github.com/ffmike/jquery-validate

 <label for="spam_email">
     <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label>
 <label for="spam_phone">
     <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label>
 <label for="spam_mail">
     <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label>
 <label for="spam[]" class="error">Please select at least two types of spam.</label>

То же самое без поля "validate" в тегах только с использованием javascript:

$("#testform").validate({ 
    rules: { 
            "spam[]": { 
                    required: true, 
                    minlength: 1 
            } 
    }, 
    messages: { 
            "spam[]": "Please select at least two types of spam."
    } 
}); 

И если вам нужны разные имена для ввода, вы можетеиспользуйте что-то вроде этого:

<input type="hidden" name="spam" id="spam"/>
<label for="spam_phone">
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label>
<label for="spam_mail">
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label>

Javascript:

 $("#testform").validate({ 
    rules: { 
        spam: { 
            required: function (element) {
                var boxes = $('.checkbox');
                if (boxes.filter(':checked').length == 0) {
                    return true;
                }
                return false;
            },
            minlength: 1 
        } 
    }, 
    messages: { 
            spam: "Please select at least two types of spam."
    } 
}); 

Я добавил скрытый ввод перед вводом и установил его как «обязательный», если нет выбранных флажков

Answer 2

Плагин validate будет проверять только текущий / выделенный элемент. Поэтому вам потребуется добавить пользовательское правило для валидатора, чтобы проверить все флажки.Аналогично ответу выше.

$.validator.addMethod("roles", function(value, elem, param) {
   return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");

И на элементе:

<input class='{roles: true}' name='roles' type='checkbox' value='1' />

Кроме того, вы, скорее всего, найдете сообщение об ошибке, не совсем достаточное.Только 1 флажок выделен и отображается только 1 сообщение.Если щелкнуть другой отдельный флажок, который затем возвращает действительный для второго флажка, исходный все еще помечается как недействительный, и сообщение об ошибке по-прежнему отображается, несмотря на то, что форма действительна.В этом случае я всегда прибегал к самому отображению и сокрытию ошибок. Валидатор в этом случае заботится только о том, чтобы не отправлять форму.

Другой вариант, который у вас есть, - написать функцию, которая изменит значение скрытого ввода, чтобы оно было «действительным», по щелчку флажка, а затем присоединит правило проверки к скрытому элементу.Это будет подтверждено только в событии onSubmit, но будет отображать и скрывать сообщения в соответствующее время.Это единственные опции, которые вы можете использовать с плагином validate.

Надеюсь, это поможет!

Answer 3

Ммм, сначала ваши атрибуты идентификатора должны быть уникальными, ваш код, вероятно, будет

<form>
<input class='roles' name='roles' type='checkbox' value='1' />
<input class='roles' name='roles' type='checkbox' value='2' />
<input class='roles' name='roles' type='checkbox' value='3' />
<input class='roles' name='roles' type='checkbox' value='4' />
<input class='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
</form>

Для вашей проблемы:

if($('.roles:checkbox:checked').length == 0)
  // no checkbox checked, do something...
else
  // at least one checkbox checked...

НО, помните, что валидация JavaScript-формы является лишь ориентировочной, все валидации ДОЛЖНЫ выполняться на стороне сервера.

Answer 4

$("#idform").validate({
    rules: {            
        'roles': {
            required: true,
        },
    },
    messages: {            
        'roles': {
            required: "One Option please",
        },
    }
});

Answer 5

Вот как я справлялся с этим в прошлом:

$().ready(function() {                                                      
    $("#contact").validate({
        submitHandler: function(form) {
            // see if selectone is even being used
            var boxes = $('.selectone:checkbox');
            if(boxes.length > 0) {
                if( $('.selectone:checkbox:checked').length < 1) {
                    alert('Please select at least one checkbox');
                    boxes[0].focus();
                    return false;
                }
            }
            form.submit();
        }
    }); 

});

Answer 6

sir_neanderthal уже опубликовал хороший ответ.

Я просто хочу отметить, что если вы хотите использовать разные имена для своих входов, вы также можете использовать (или просто скопировать метод) require_from_group метод из официальной проверки jQuery extra-method.js ( ссылка на CDN для версии 1.13.1 ).

Answer 7

Весьма вероятно, что вы хотите иметь текст рядом с флажком.В этом случае вы можете поставить флажок внутри метки, как я делаю ниже:

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label>
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label>

Проблема в том, что когда отображается сообщение об ошибке, оно будет вставлено после флажка, но перед текстом,делая это нечитаемым.Чтобы исправить это, я изменил функцию размещения ошибок:

if (element.is(":checkbox")) {
    error.insertAfter(element.parent().parent());
}
else {
    error.insertAfter(element);
}

Это зависит от вашего макета, но я сделал специальное размещение ошибок для элементов управления флажками.Я получаю родительский флажок, который является меткой, а затем я получаю его родителя, который является div в моем случае.Таким образом, ошибка помещается под списком элементов управления флажком.

Answer 8

убедитесь, что input-name[] в кавычках в наборе правил. Мне потребовались часы, чтобы понять эту часть.

$('#testform').validate({
  rules : {
    "name[]": { required: true, minlength: 1 }
  }
});

подробнее здесь ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29