JQuery Validate проверка по крайней мере, один флажок

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

Подтверждающий плагин проверяет только текущий/сфокусированный элемент. Поэтому вам нужно будет добавить настраиваемое правило к валидатору для проверки всех флажков. Как и в предыдущем ответе.

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

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

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

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

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

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

Answer 2

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

<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 3

Пример из 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> 

То же без поля «Подтвердить» в тегах только с помощью JavaScript:

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

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

<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 4

Это, как я имел дело с этим в прошлом:

$().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 5

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

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

далее здесь ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

Answer 6

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

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

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

Answer 8

sir_neanderthal уже разместил приятный ответ.

Я просто хочу отметить, что если вы хотите использовать разные имена для входов можно также использовать (или просто скопировать метод) require_from_group method из официального JQuery Validation дополнительных-methods.js (link to CDN for version 1.13.1) ,