web-dev-qa-db-fra.com

Plugin de validation jQuery: case à cocher valider

J'utilise le plugin jQuery Validation pour valider la case à cocher car il n'a pas d'option par défaut, une doit être sélectionnée et deux cases à cocher maximum peuvent être sélectionnées, ce sont les critères. Je ne reçois aucune erreur et cela ne valide pas. Je le prolonge comme ci-dessous,

  <input type="checkbox" name="test[]" />x
   <input type="checkbox" name="test[]"  />y
   <input type="checkbox" name="test[]" />z
     $("#formid").validate({
  rules: {
    test[]: { 

            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }

          },
messages: { 

    test[]: "You must check at least 1 box"
  }
 });
jqueryjquery-validate
15
ram

Vous avez rencontré plusieurs problèmes avec votre code.

1) Manque une accolade fermante, }, dans votre rules.

2) Dans ce cas, il n'y a aucune raison d'utiliser une fonction pour la règle required. Par défaut, le plugin peut très bien gérer les entrées checkbox et radio, donc utiliser true est suffisant. Cependant, cela fera simplement la même logique que dans votre fonction d'origine et vérifiera qu'au moins une est cochée.

3) Si vous souhaitez également que seulement deux au maximum soient vérifiés, vous devrez appliquer la règle maxlength.

4) L'option messages manquait la spécification de la règle. Cela fonctionnera, mais le seul message personnalisé s'appliquerait à toutes les règles sur le même champ.

5) Si un attribut name contient des crochets, vous devez le mettre entre guillemets .

DEMO: http://jsfiddle.net/K6Wvk/

$(document).ready(function () {

    $('#formid').validate({ // initialize the plugin
        rules: {
            'test[]': {
                required: true,
                maxlength: 2
            }
        },
        messages: {
            'test[]': {
                required: "You must check at least 1 box",
                maxlength: "Check no more than {0} boxes"
            }
        }
    });

});
42
Sparky

Vous pouvez valider la case à cocher du groupe et le bouton radio sans code js supplémentaire, voir l'exemple ci-dessous.

Votre JS devrait ressembler à:

$("#formid").validate();

Vous pouvez jouer avec la balise HTML et les attributs: par exemple. case à cocher de groupe [minlength = 2 et maxlength = 4]

<fieldset class="col-md-12">
  <legend>Days</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="1" required="required" data-msg-required="This value is required." minlength="2" maxlength="4" data-msg-maxlength="Max should be 4">Monday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="2">Tuesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="3">Wednesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="4">Thursday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="5">Friday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="6">Saturday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="7">Sunday
        </label>
        <label for="daysgroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

Vous pouvez voir ici d'abord ou n'importe quelle entrée devrait avoir requis, les attributs minlength = "2" et maxlength = "4". minlength/maxlength selon votre condition.

par exemple. bouton radio de groupe:

<fieldset class="col-md-12">
  <legend>Gender</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="m" required="required" data-msg-required="This value is required.">man
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="w">woman
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="o">other
        </label>
        <label for="gendergroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

Vous pouvez vérifier l'exemple de travail ici .

  • jQuery v3.3.x
  • plugin de validation jQuery - v1.17.0
0
Ghanshyam Gohel