Подтвердить что ты не робот

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

Я пытаюсь проверить форму, используя плагин validate для jquery. Я хочу потребовать, чтобы пользователь проверил по крайней мере один флажок в группе, чтобы форма была отправлена. Здесь мой код jquery:

$().ready(function() {
$("#subscribeForm").validate({
   rules:   { list: {required: "#list0:checked"} },
   messages:  { list:  "Please select at least one newsletter"}                                                        
 });
 });

и здесь html-форма:

<form action="" method="GET" id="subscribeForm">
<fieldset id="cbgroup">
    <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
    <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
    <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit"  value="submit">

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

4b9b3361

ОТВЕТЫ

Ответ 1

Этот script ниже должен поставить вас на правильный путь, возможно?

Вы можете сохранить этот html одинаковым (хотя я изменил метод на POST):

<form method="POST" id="subscribeForm">
    <fieldset id="cbgroup">
        <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
        <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
        <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
    </fieldset>
    <input name="submit" type="submit"  value="submit">
</form>

и этот javascript проверяет

function onSubmit() 
{ 
    var fields = $("input[name='list']").serializeArray(); 
    if (fields.length === 0) 
    { 
        alert('nothing selected'); 
        // cancel submit
        return false;
    } 
    else 
    { 
        alert(fields.length + " items selected"); 
    }
}

// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)

и вы можете найти рабочий пример здесь

ОБНОВЛЕНИЕ (октябрь 2012 г.)
Кроме того, следует отметить, что флажки должны иметь свойство "name", иначе они не будут добавлены в массив. Только наличие "id" не будет работать.

ОБНОВЛЕНИЕ (май 2013 г.)
Перемещена регистрация регистрации на javascript и зарегистрирована подача на форму (как и должно быть изначально)

ОБНОВЛЕНИЕ (июнь 2016 года)
Изменения == до ===

Ответ 2

  $('#subscribeForm').validate( {
      rules: {
          list: {
              required: true,
              minlength: 1
          }
       }
   });

Я думаю, что это проверит, по крайней мере, один проверен.

Ответ 3

Как насчет этого:

$(document).ready(function() {
    $('#subscribeForm').submit(function() {
        var $fields = $(this).find('input[name="list"]:checked');
        if (!$fields.length) {
            alert('You must check at least one box!');
            return false; // The form will *not* submit
        }
    });
});

Ответ 4

Вышеупомянутый addMethod Лода Лоусона не совсем корректен. Он $.validator, а не $.validate и имя метода валидатора cb_selectone требует кавычек. Вот исправленная версия, которую я тестировал:

$.validator.addMethod('cb_selectone', function(value,element){
    if(element.length>0){
        for(var i=0;i<element.length;i++){
            if($(element[i]).val('checked')) return true;
        }
        return false;
    }
    return false;
}, 'Please select at least one option');

Ответ 5

Вот краткое решение для множественной проверки флажка с использованием плагина проверки правильности jquery:

jQuery.validator.addMethod('atLeastOneChecked', function(value, element) {
  return ($('.cbgroup input:checked').length > 0);
});

$('#subscribeForm').validate({
  rules: {
    list0: { atLeastOneChecked: true }
  },
  messages: {
    list0: { 'Please check at least one option' }
  }
});

$('.cbgroup input').click(function() {
  $('#list0').valid();
});

Ответ 7

if (
  document.forms["form"]["mon"].checked==false &&
  document.forms["form"]["tues"].checked==false &&
  document.forms["form"]["wed"].checked==false &&
  document.forms["form"]["thrs"].checked==false &&
  document.forms["form"]["fri"].checked==false
) {
  alert("Select at least One Day into Five Days");
  return false; 
}

Ответ 8

Как насчет этого

$.validate.addMethod(cb_selectone,
                   function(value,element){
                           if(element.length>0){
                               for(var i=0;i<element.length;i++){
                                if($(element[i]).val('checked')) return true;
                               }
                           return false;
                           }
                            return false;
                  },
                  'Please select a least one')

Теперь вы делаете

$.validate({rules:{checklist:"cb_selectone"}});

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

Ответ 9

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

// param: reqNum number of checkboxes to select
$.fn.checkboxValidate = function(reqNum){
    var fields = this.serializeArray();
    return (fields.length < reqNum) ? 'invalid' : 'valid';
}

то вы можете передать эту функцию, чтобы проверить несколько групп флажков с несколькими правилами.

// helper function to create error
function err(msg){
    alert("Please select a " + msg + " preference.");
}

$('#reg').submit(function(e){
    //needs at lease 2 checkboxes to be selected
    if($("input.region, input.music").checkboxValidate(2) == 'invalid'){
        err("Region and Music");
    } 
});

Ответ 10

У меня был случайный сценарий. Мои флажки были созданы в динамическом режиме, и они не были одной группой. Но по крайней мере любой из них должен был быть проверен. Мой подход (никогда не говорите, что это идеально), я создал для всех их универсальный валидатор:

jQuery.validator.addMethod("validatorName", function(value, element) {
    if (($('input:checkbox[name=chkBox1]:checked').val() == "Val1") ||
        ($('input:checkbox[name=chkBox2]:checked').val() == "Val2") ||
        ($('input:checkbox[name=chkBox3]:checked').val() == "Val3")) 
    {   
        return true;
    }
    else
    {
        return false;
    }       
}, "Please Select any one value");

Теперь мне пришлось связать каждый из chkbox с одним единственным валидатором.

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

$('#piRequest input:checkbox[name=chkBox1]').click(function(e){
    $("#myform").valid();
});

Ответ 11

Я проверил все ответы и даже в других подобных вопросах, я пытался найти оптимальный путь с помощью класса HTML и пользовательского правила.

моя структура HTML для нескольких флажков, как это

$.validator.addMethod('multicheckbox_rule', function (value, element) {
			var $parent = $(element).closest('.checkbox_wrapper');
			if($parent.find('.checkbox_item').is(':checked')) return true;
            return false;
}, 'Please at least select one');
<div class="checkbox_wrapper">
<label for="checkbox-1"><input class="checkbox_item" id="checkbox-1"  name="checkbox_item[1]" type="checkbox" value="1" data-rule-multicheckbox_rule="1" /> Checkbox_item 1</label>
<label for="checkbox-2"><input class="checkbox_item" id="checkbox-2" name="checkbox_item[2]" type="checkbox" value="1" data-rule-multicheckbox_rule="1" /> Checkbox_item 1</label>
</div>