Comment valider un formulaire avec plusieurs cases à cocher pour qu'au moins une d'entre elles soit cochée ?

Question

J'essaie de valider un formulaire à l'aide du plugin validate pour jquery. Je veux exiger que l'utilisateur coche au moins une case dans un groupe pour que le formulaire soit soumis. Voici mon code jquery :

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

et voici le formulaire 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">

Le problème est que le formulaire est soumis même si rien n'est coché. Comment puis-je résoudre ce problème ?

Answer 1

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

Je pense que cela permettra d'en vérifier au moins un.

Answer 2

Ce script ci-dessous devrait vous mettre sur la bonne voie peut-être ?

Vous pouvez garder le même html (bien que j'ai changé la méthode en 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>

et ce javascript valide

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)

et vous pouvez trouver un exemple de travail ici

MISE À JOUR (octobre 2012)
En outre, il convient de noter que les cases à cocher doit avoir une propriété "name", sinon ils ne seront pas ajoutés au tableau. Le fait de n'avoir que la propriété "id" ne fonctionnera pas.

MISE À JOUR (mai 2013)
Déplacement de l'enregistrement du submit en javascript et enregistrement du submit sur le formulaire (comme il aurait dû l'être à l'origine)

MISE À JOUR (juin 2016)
Modifications == à ===

Answer 3

Que dites-vous de ça ?

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

L'addMethod de Lod Lawson ci-dessus n'est pas complètement correct. C'est $.validator et non $.validate et le nom de la méthode du validateur cb_selectone nécessite des guillemets. Voici une version corrigée que j'ai testée :

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

Voici une solution rapide pour la validation de plusieurs cases à cocher à l'aide du plugin de validation 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();
});