web-dev-qa-db-fra.com

Comment valider un formulaire avec plusieurs cases à cocher pour en avoir au moins une cochée

J'essaie de valider un formulaire à l'aide du plugin validate for jquery. Je veux demander à l'utilisateur de cocher au moins une case dans un groupe pour pouvoir soumettre le formulaire. 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 ça?

javascripthtmlcheckboxjquery-validate
39
jalperin

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

Vous pouvez garder le même code 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)
De plus, il faut noter que les cases à cocher doivent ont une propriété "name", sinon elles ne seront pas ajoutées au tableau. Seulement avoir "id" ne fonctionnera pas.

UPDATE (mai 2013)
Déplacé l'enregistrement de soumission en javascript et inscription de l'envoi sur le formulaire (comme il aurait dû l'être à l'origine)

MISE À JOUR (juin 2016)
Changements == en ===

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

Je pense que cela fera en sorte qu'au moins un d'entre eux soit coché.

52
Vincent P

Que dis-tu 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
        }
    });
});
11
JJ Geewax

L'addMethod ci-dessus de Lod Lawson n'est pas tout à fait correct. C'est $ .validator et non pas $ .validate et le nom de la méthode de validation 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');
9
Stefan Morrow

Voici une solution rapide pour la validation de cases à cocher multiples en utilisant le 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();
});
6
alexborbely

Bon exemple sans méthodes de validation personnalisées, mais avec le plugin metadata et du code HTML supplémentaire.

Démo de l'auteur du plugin Jquery.Validate

1
Vasiliy Toporov

J'ai vérifié toutes les réponses et même dans d'autres questions similaires, j'ai essayé de trouver le moyen optimal avec l'aide de la classe HTML et de la règle personnalisée.

ma structure html pour plusieurs cases à cocher est comme ça

$.validator.addMethod('multicheckbox_rule', function (value, element) {
			var $parent = $(element).closest('.checkbox_wrapper');
			if($parent.find('.checkbox_item').is(':checked')) return true;
            return false;
}, 'Please at least select one');
<div class="checkbox_wrapper">
<label for="checkbox-1"><input class="checkbox_item" id="checkbox-1"  name="checkbox_item[1]" type="checkbox" value="1" data-rule-multicheckbox_rule="1" /> Checkbox_item 1</label>
<label for="checkbox-2"><input class="checkbox_item" id="checkbox-2" name="checkbox_item[2]" type="checkbox" value="1" data-rule-multicheckbox_rule="1" /> Checkbox_item 1</label>
</div>

0
Manchumahara
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;   
}
0
M.Awais

Que dis-tu de ça 

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

Maintenant tu peux faire 

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

Vous pouvez même aller plus loin en spécifiant le nombre minimal à sélectionner avec un troisième paramètre dans la fonction de rappel.

0
Lod Lawson

J'ai dû faire la même chose et c'est ce que j'ai écrit. Je l'ai rendu plus souple dans mon cas, car j'avais plusieurs groupes de cases à cocher à vérifier.

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

alors vous pouvez passer cette fonction pour cocher plusieurs groupes de cases à cocher avec plusieurs règles.

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

J'ai eu un scénario légèrement différent. Mes cases à cocher ont été créées en dynamique et elles ne font pas partie du même groupe. Mais au moins l'un d'entre eux devait être vérifié. Mon approche (ne jamais dire que c'est parfait), j'ai créé un validateur génrique pour tous:

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

Maintenant, je devais associer chacun des chkbox à ce seul validateur.

Encore une fois, je devais déclencher la validation lorsque n'importe quelle case à cocher était activée, ce qui déclenchait le validateur.

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