web-dev-qa-db-fra.com

jquery valider cocher au moins une case

J'ai quelque chose comme ça:

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

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

jqueryjquery-validate
53
Omu

Le plugin validate ne validera que l’élément actuel/ciblé. Par conséquent, vous devrez ajouter une règle personnalisée au validateur pour valider toutes les cases à cocher. Similaire à la réponse ci-dessus.

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

Et sur l'élément:

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

De plus, vous constaterez probablement que le message d'erreur affiché n'est pas tout à fait suffisant. Une seule case à cocher est mise en surbrillance et un seul message est affiché. Si vous cliquez sur une autre case à cocher séparée, qui renvoie ensuite une valeur valide pour la seconde, l’original est toujours marqué comme non valide et le message d’erreur est toujours affiché, même si le formulaire est valide. et me cacher les erreurs moi-même dans ce cas.Le validateur prend alors seulement soin de ne pas soumettre le formulaire. 

L’autre option consiste à écrire une fonction qui modifiera la valeur d’une entrée masquée en "validant" au clic d’une case à cocher, puis joindrez la règle de validation à l’élément masqué. Ceci ne sera cependant validé que dans l'événement onSubmit, mais affichera et cachera les messages aux moments appropriés. Ce sont à peu près les seules options que vous pouvez utiliser avec le plugin validate.

J'espère que cela pourra aider!

37
menzies

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

Le même sans champ "validate" dans les balises utilisant uniquement javascript:

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

Et si vous avez besoin de noms différents pour les entrées, vous pouvez utiliser quelque chose 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é des entrées masquées avant les entrées et les ai réglées sur "obligatoire" s'il n'y a pas de cases cochées

99
sir_neanderthal

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.

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

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

});
4
Kenrick Buchanan

Il est fort probable que vous souhaitiez avoir un texte en regard de la case à cocher. Dans ce cas, vous pouvez mettre la case à cocher à l'intérieur d'une étiquette comme je le fais ci-dessous:

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

Le problème est que lorsque le message d'erreur est affiché, il sera inséré après la case à cocher, mais avant le texte, le rendant illisible. Afin de résoudre ce problème, j'ai changé la fonction de placement d'erreur:

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

Cela dépend de votre mise en page mais ce que j'ai fait est d'avoir un placement d'erreur spécial pour les contrôles de case à cocher. Je reçois le parent de la case à cocher, qui est une étiquette, puis le parent de celle-ci, qui est un div dans mon cas. De cette façon, l'erreur est placée sous la liste des contrôles de case à cocher.

2
Francisco Goldenstein

sir_neanderthal a déjà posté une belle réponse.

Je tiens simplement à souligner que si vous souhaitez utiliser différents noms pour vos entrées, vous pouvez également utiliser (ou simplement copier la méthode) require_from_group, méthode depuis la validation officielle jQuery additional-methods.js ( lien vers CDN pour la version 1.13.1 ).

2
betatester07

assurez-vous que le input-name[] est entre guillemets dans le jeu de règles. Il m'a fallu des heures pour comprendre cette partie.

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

lire la suite ici ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

0
user2060616