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

Question

У меня есть следующий фрагмент HTML кода для формы флажков

<div class="drinking col-xs-12"> 
    <div class="col-xs-7 drinkingLeft"> 
    <input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA" value="0" data-label="All Wines" /> 
    <input id='allwinesHidden' type='hidden' value='0' name='allwines'> 
    </div> 
    <div class="col-xs-5 drinkingLeft"> 
    <input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB" value="0" data-label="Beer" /> 
    <input id='beerHidden' type='hidden' value='0' name='beer'> 
    </div> 
    <div class="clearix"></div> 
    <div class="col-xs-7 drinkingLeft"> 
    <input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC" value="0" data-label="Red Wines" /> 
    <input id='redwinesHidden' type='hidden' value='0' name='redwines'> 
    </div> 
    <div class="col-xs-5 drinkingLeft"> 
    <input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD" value="0" data-label="Cider" /> 
    <input id='ciderHidden' type='hidden' value='0' name='cider'> 
    </div> 
    <div class="clearix"></div> 
    <div class="col-xs-7 drinkingLeft"> 
    <input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE" value="0" data-label="White Wines" /> 
    <input id='whitewinesHidden' type='hidden' value='0' name='whitewines'> 
    </div> 
    <div class="col-xs-5 drinkingLeft"> 
    <input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF" value="0" data-label="Spirits" /> 
    <input id='spiritsHidden' type='hidden' value='0' name='spirits'> 
    </div> 
    <div class="clearix"></div> 
    <div class="col-xs-7 drinkingLeft"> 
    <input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG" value="0" data-label="Sparkling/Champagne" /> 
    <input id='sparklingHidden' type='hidden' value='0' name='sparkling'> 
    </div> 
    <div class="col-xs-5 drinkingLeft"> 
    <input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH" value="0" data-label="Fortified" /> 
    <input id='fortifiedHidden' type='hidden' value='0' name='fortified'> 
    </div> 
    <div id="error_msg3"></div> 
    <div class="clearix"></div> 
</div> 
</div> 

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

Я хочу, чтобы NOT в качестве окна оповещения; однако сообщение должно появиться в ошибке div-msg3.

Обратите внимание, что все входы имеют разные имена классов и идентификаторы. Ссылка постановка на

https://bitly.com/1i3f1MY

Я использую JQuery проверки для проверки остальной части формы. Будет приятно получить решение через проверку jquery.

Заранее спасибо

Answer 1

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

Вы можете после того, как показать пользовательские сообщения и добавить его в #error_msg3 с:

if(element.attr("name") == "check") error.appendTo("#error_msg3") 

EDIT

$("input[type='checkbox'][name='check']").change(function() { 
    if ($("input[type='checkbox'][name='check']:checked").length){ 
     $(this).valid() 
    } 
}) 

ЭОД T 2

Я обновил Fiddle, теперь сообщение переключается правильно, если у вас установлен хотя бы один флажок.

$("input[type='checkbox'][name='check']").change(function() { 
    $('#submitDetails').valid(); 
}); 

Fiddle here

Answer 2

Попробуйте с этим

$("#YourbuttonId").click(function(){ 
    if($('input[type=checkbox]:checked').length == 0) 
    { 
     alert('Please select atleast one checkbox'); 
    } 
}); 

плагином

HTML

<label class="checkbox inline"> 
<input type="checkbox" id="typecb1" name="spamm[]" value="Loading Point"> Loading Point 
</label> 
<label class="checkbox inline"> 
<input type="checkbox" id="typecb2" name="spamm[]" value="Unloading Point"> Unloading Point 
</label> 
<label class="checkbox"> 
<input type="checkbox" id="typecb3" name="spamm[]" value="Retailer Unloading"> Retailer Unloading 
</label> 

Script

rules:{ 
    "spamm[]": { 
     required: true, 
     minlength: 1 
     } 
    } 

Answer 3

Попробуйте

добавить этот код будет делать

var chck = $('input[type=checkbox]'); 
chck.addClass('check-one'); 
$.validator.addMethod('check-one', function (value) { 
    return (chck.filter(':checked').length > 0); 
}, 'Check at least one checkbox'); 

---

fiddle Demo

Group покажет ошибку перед первым проверить ящик только

var chck = $('input[type=checkbox]'); 
chck.addClass('check-one'); 
$.validator.addMethod('check-one', function (value) { 
    return (chck.filter(':checked').length > 0); 
}, 'Check at least one checkbox'); 
var chk_names = $.map(chck, function (el, i) { 
    return $(el).prop("name"); 
}).join(" "); 
$("#submitDetails").validate({ 
    groups: { 
     checks: chk_names 
    }, 
    submitHandler: function (form) { 
     alert('Form Submited'); 
     return false; 
    } 
}); 

---

Удалить группу, если вы хотите ошибки, чтобы показать перед всеми галочками

fiddle Demo

$("#submitDetails").validate({ 
    submitHandler: function (form) { 
     alert('Form Submited'); 
     return false; 
    } 
}); 

Answer 4

Цитата OP:

«Я хочу, чтобы убедиться, что в выбран один из флажков. "

Если вы хотите использовать плагин JQuery Validate, и все чекбоксы имеют различную name, просто использовать метод require_from_group, который является частью the additional-methods.js file.

Поскольку у вас уже есть общий класс на этих флажках с именем require-one, это еще проще.

$('#form').validate({ 
    rules: { 
     fieldname: { 
      require_from_group: [1, '.require-one'] 
     }, 
     // declare same rule on all eight checkboxes 
     .... 
     .... 
    } 
}); 

Однако, вместо того, чтобы объявлять все восемь из них в .validate(), вы можете использовать метод .rules('add') внутри JQuery .each() объявить их все сразу.

$('.require-one').each(function() { 
    $(this).rules('add', { 
     require_from_group: [1, this], 
     messages: { 
      require_from_group: "please check one" 
     } 
    }); 
}); 

Затем объединить все восемь сообщений в один, используйте опцию groups ...

$('#form').validate({ 
    groups: { // combine these error messages into one 
     checkboxes: 'allwines beer redwines cider whitewines spirits sparkling fortified' 
    } 
}); 

Работа DEMO: http://jsfiddle.net/JVWu2/1/

Размещение вашего сообщения об ошибке в поле #error_msg3 ошибок является ничем не отличается от размещения каких-либо из ваших других сообщений jQuery Validate.

Answer 5

Это очень просто ......

function validate_form() 
{ 
valid = true; 

if($('input[type=checkbox]:checked').length == 0) 
{ 
    alert ("ERROR! Please select at least one checkbox"); 
    valid = false; 
} 

return valid; 
} 

HTML

<form name="myform" method="post" action="#" onsubmit="return validate_form();"> 
<input type="checkbox" name="box1" value="box1">Box1 
<input type="checkbox" name="box2" value="box2">Box2 
<input name="submit" type="submit" value="Submit"/> 
</form>