Jak sprawdzać poprawność formularza z wieloma polami wyboru, aby mieć co najmniej jedną zaznaczoną

Question

Próbuję sprawdzić poprawność formularza za pomocą wtyczki sprawdzania poprawności dla jquery. Chcę wymagać, aby użytkownik zaznaczył co najmniej jedno pole wyboru w grupie w celu przesłania formularza. Oto mój kod jquery:

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

i oto formularz 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"> 

Problemem jest to, że forma podnosi nawet jeśli nic nie jest zaznaczone. Jak mogę to rozwiązać?

Answer 1

Ten skrypt poniżej może postawić Cię na dobrej drodze?

Można zachować ten html samo (choć zmieniłem metodę 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> 

i to javascript sprawdza

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) 

można znaleźć working example of it here

AKTUALIZACJA (październik 2012)
Dodatkowo należy zauważyć, że chec kboxes musi mieć właściwość "nazwa", inaczej nie zostaną dodane do tablicy. Tylko posiadanie "id" nie będzie działać.

UPDATE (maj 2013),
przeniósł złożyć rejestracyjne javascript i zarejestrowany złożyć na formularzu (jak powinno być pierwotnie)

UPDATE (czerwiec 2016)
Zmiany == do ===

Answer 2

Jak o tym:

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

Answer 3

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

Myślę, że to sprawi, że przynajmniej jeden jest sprawdzany.

Answer 4

Jak o tym

$.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') 

Teraz ca zrobić

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

Można nawet pójść ponadto określić minimalną liczbę, aby wybrać z trzecim param w function.I zwrotnych nie testowane jeszcze mi powiedz, czy to działa.

Answer 5

Powyższy addMethod napisany przez Lod Lawsona nie jest całkowicie poprawny. To $ .validator, a nie $ .validate, a nazwa metody walidatora cb_selectone wymaga wyceny.Oto poprawiona wersja, że ​​testowane:

$.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'); 

Answer 6

Oto szybkie rozwiązanie do wielokrotnego sprawdzania pole wyboru przy użyciu plugin sprawdzania poprawności 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(); 
}); 

Answer 7

Dobrym przykładem bez zwyczaju walidacji metod, ale z wtyczki metadanych i trochę dodatkowego html.

Demo from Jquery.Validate plugin author

Answer 8

musiałem zrobić to samo i to jest to, co ja wrote.I staje się on bardziej elastyczny w moim przypadku jak miałem wielokrotne grupy pól wyboru w celu sprawdzenia.

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

Następnie można przekazać tę funkcję, aby sprawdzić wiele grup pól wyboru z wieloma regułami.

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

Answer 9

Miałem zupełnie inny scenariusz. Moje pola wyboru zostały utworzone dynamicznie i nie należały do ​​tej samej grupy. Ale przynajmniej jeden z nich musiał zostać sprawdzony. Moje podejście (nigdy powiedzieć, że jest doskonały), stworzyłem genric walidator dla nich wszystkich:

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

Teraz miałem skojarzyć każdy z chkbox do tego jednego weryfikatora.

Ponownie musiałem uruchomić sprawdzanie poprawności po kliknięciu dowolnego z pól wyboru, uruchamiając narzędzie sprawdzania poprawności.

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

Answer 10

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