jquery valider cocher au moins une case

Question

J'ai quelque chose comme ça:

 <form>
<input id='roles' name='roles' type='checkbox' value='1' />
<input id='roles' name='roles' type='checkbox' value='2' />
<input id='roles' name='roles' type='checkbox' value='3' />
<input id='roles' name='roles' type='checkbox' value='4' />
<input id='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
<form>
 

Je voudrais valider qu'au moins une case à cocher (rôles) doit être cochée, est-ce possible avec jquery.validate?

Answer 1

Exemple de http://jquery.bassistance.de/

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

Même sans champ "valider" dans les tags à l'aide de javascript:

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

Et si vous avez besoin des noms différents pour les entrées, vous pouvez utiliser somethig comme ceci:

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

J'ai ajouté caché d'entrée avant d'entrées et la valeur "nécessaire" si il n'y a pas de cases sélectionnées

Answer 2

Valider le plugin ne valider le courant/concentré élément.Par conséquent, vous aurez besoin d'ajouter une règle spéciale pour le programme de validation pour valider toutes les cases. Similaire à la réponse ci-dessus.

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

Et sur l'élément:

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

En outre, vous trouverez probablement le message d'erreur à l'affichage, pas tout à fait suffisant. 1 seule case à cocher est sélectionnée et seulement 1 message affiché. Si vous cliquez sur une autre case, qui renvoie alors valide pour la deuxième case, l'original est toujours marquée comme invalide, et le message d'erreur est toujours affiché, en dépit de la forme en cours de validité. J'ai toujours eu recours à juste l'affichage et le masquage des erreurs moi-même dans ce cas.Le programme de validation puis seulement prend soin de ne pas soumettre le formulaire.

L'autre option que vous avez est d'écrire une fonction qui permet de changer la valeur d'un caché d'entrée pour être "valide" sur le clic sur une case à cocher, puis attacher la règle de validation de l'élément masqué. Cela ne fera que valider dans l'événement onSubmit, mais permettra d'afficher et de masquer les messages au moment approprié. Ceux-ci sont sur les seules options que vous pouvez utiliser avec le valider plugin.

Espérons que ça aide!

Answer 3

Mmm d’abord, vos attributs d’identité doivent être uniques, votre code est susceptible d’être

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

Pour votre problème:

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

MAIS, rappelez-vous qu'une validation de formulaire JavaScript est uniquement indicative, toutes les validations DOIVENT être effectuées côté serveur.

Answer 4

$("#idform").validate({
    rules: {            
        'roles': {
            required: true,
        },
    },
    messages: {            
        'roles': {
            required: "One Option please",
        },
    }
});

Answer 5

Voici comment je l'ai traité dans le passé:

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

});