jquery validate check przynajmniej jedno pole

Question

mam coś takiego:

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

chciałbym potwierdzić, że co najmniej jedno pole wyboru (role) powinny być sprawdzone, jest to możliwe z jquery.validate?

Answer 1

Wtyczka sprawdzania poprawności sprawdza tylko bieżący/skupiony element.W związku z tym do walidatora należy dodać niestandardową regułę, aby sprawdzić wszystkie pola wyboru. Podobnie jak w powyższej odpowiedzi.

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

A na elemencie:

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

Ponadto, będzie prawdopodobnie znaleźć wyświetlanie komunikatu o błędzie, nie dość wystarczające. Tylko 1 pole wyboru jest podświetlone i wyświetlany jest tylko 1 komunikat. Jeśli klikniesz inne osobne pole wyboru, które następnie zwróci poprawne dla drugiego pola wyboru, oryginalna nadal będzie oznaczona jako niepoprawna, a komunikat o błędzie będzie nadal wyświetlany, mimo że formularz jest ważny. Zawsze próbowałem tylko wyświetlać i ukrywać błędy w tym przypadku. Weryfikator dba tylko o to, aby nie przesłać formularza.

Inną opcją jest napisanie funkcji, która zmieni wartość ukrytego wejścia, aby było "prawidłowe" po kliknięciu pola wyboru, a następnie dołączenie reguły sprawdzania poprawności do ukrytego elementu. Będzie to jednak sprawdzane tylko w zdarzeniu onSubmit, ale będzie wyświetlało i ukrywało wiadomości o odpowiedniej porze. Są to jedyne opcje, których można używać z wtyczką sprawdzania poprawności.

Nadzieję, że pomaga!

Answer 2

Mmm pierwszy atrybuty id musi być unikalna, Twój kod będzie prawdopodobnie

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

Dla Twojego problemu:

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

ale należy pamiętać, że walidacja formularza JavaScript jest tylko orientacyjne, wszystko walidacje MUSZĄ być wykonane po stronie serwera.

Answer 3

Przykład z 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> 

samo bez pola "validate" w tagach tylko przy użyciu javascript:

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

A jeśli potrzebujesz różnych nazw dla wejść, można użyć somethig tak:

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

Dodałem ukryte wejście przed wejściami i ustawienie go na „niezbędne”, jeśli nie wybrano pola wyboru

Answer 4

Jest to jak mam do czynienia z nim w przeszłości:

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

makijażu upewnij się, że input-name[] jest w cudzysłowie w zestawie reguł.Zajęło mi to godziny, żeby wymyślić tę część.

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

czytaj więcej tutaj ... 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

Jest wysoce prawdopodobne, że chcesz mieć tekst obok pola wyboru. W takim przypadku, można umieścić pole wyboru wewnątrz wytwórni jak ja poniżej:

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

Problem polega na tym, że gdy pojawi się komunikat o błędzie, to będzie wstawiony po wyboru ale przed tekstem, co czyni go nieczytelne. W celu ustalenia, że ​​zmieniłem funkcję kwalifikacyjny błędu:

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

To zależy od układu, ale to, co zrobiłem jest posiadanie specjalnego umieszczenie błędu dla kontroli wyboru. Dostaję rodzica z pola wyboru, które jest etykietą, a następnie otrzymuję jego rodzica, co w moim przypadku jest div. W ten sposób błąd zostanie umieszczony poniżej listy elementów sterujących pola wyboru.

Answer 8

sir_neanderthal już napisali miłą odpowiedź.

Chcę tylko zwrócić uwagę, że jeśli chcesz używać różnych nazw dla wejść można również użyć (lub po prostu skopiować metody) require_from_group method z oficjalnych jQuery Validation dodatkowych-methods.js (link to CDN for version 1.13.1) .