Validation jQuery en utilisant la classe au lieu du nom valeur

Question

Validation jQuery en utilisant la classe au lieu du nom valeur

Demandé el 6 de Mai, 2010: Quand la question a-t-elle été
37957 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'aimerais valider un formulaire à l'aide de jquery valider plugin, mais je suis incapable d'utiliser le nom de la valeur dans le code html - s'agissant d'un domaine aussi utilisé par le serveur d'application. Plus précisément, j'ai besoin de limiter le nombre de cases cochées à partir d'un groupe. (Maximum de 3.) Tous les exemples que j'ai vu, l'utilisation de l'attribut name de chaque élément. Ce que je voudrais faire est d'utiliser la classe au lieu de cela, et de déclarer ensuite une règle pour ça.

html

Ceci fonctionne:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation"  value="1" />

Cela ne fonctionne pas, mais est ce que je vise:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" />

javascript:

var validator = $(".formToValidate").validate({    
    rules:{     
    "salutation":{  
             required:true,  
        },  
        "checkBox":{  
             required:true,  
          minlength:3  }  
   }   
});

Est-il possible de faire cela existe - il un moyen de cibler la classe à la place du nom dans les règles options? Ou dois-je ajouter une méthode personnalisée?

Cheers, Matt

Demandé el 6 de Mai, 2010 par Matt

Answer 1

5 Réponses

Answer 2

88voto

Nick Craver Points 313913

Vous pouvez ajouter les règles basées sur ce sélecteur en utilisant .rules("add", options) , supprimez simplement les règles de votre choix basées sur vos options de validation et, après avoir appelé $(".formToValidate").validate({... }); , procédez comme suit:

 $(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});

Répondu el 6 de Mai, 2010 par Nick Craver (313913 Points )

Answer 3

43voto

Ricardo Silva Points 638

Une autre façon de procéder consiste à utiliser addClassRules . C'est spécifique pour les classes, alors que l'option utilisant selector et .rules est plus générique.

Avant d'appeler

 $(form).validate()

Utilisez comme ceci:

 jQuery.validator.addClassRules('myClassName', {
        required: true /*,
        other rules */
    });

Réf.: Http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

Je préfère cette syntaxe pour un cas comme celui-ci.

Répondu el 21 de Novembre, 2012 par Ricardo Silva (638 Points )

Answer 4

15voto

user3571366 Points 79

Je sais que c'est une vieille question. Mais j'ai trop besoin de la même récemment, et j'ai eu cette question à partir de stackoverflow + une autre réponse à partir de ce blog. La réponse qui a été dans le blog était plus simple car il se concentre spécialement pour ce type de validation. Voici comment le faire.

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

Cette méthode ne nécessite pas d'avoir valider la méthode au-dessus de cet appel.

Espérons que cela va aider quelqu'un dans le futur. Source ici.

Répondu el 16 de Août, 2014 par user3571366 (79 Points )

Answer 5

6voto

Ajay Sharma Points 59

Voici la solution utilisant jQuery:

     $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });

Répondu el 10 de Août, 2011 par Ajay Sharma (59 Points )

Answer 6

3voto

Delan Azabani Points 33013

Voici ma solution (ne nécessite pas jQuery ... juste JavaScript):

 function argsToArray(args) {
  var r = []; for (var i = 0; i < args.length; i++)
    r.push(args[i]);
  return r;
}
function bind() {
  var initArgs = argsToArray(arguments);
  var fx =        initArgs.shift();
  var tObj =      initArgs.shift();
  var args =      initArgs;
  return function() {
    return fx.apply(tObj, args.concat(argsToArray(arguments)));
  };
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
  checkbox.addEventListener('change', bind(function(checkbox, salutation) {
    var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
    if (numChecked >= 4)
      checkbox.checked = false;
  }, null, checkbox, salutation), false);
});

Placez ceci dans un bloc de script à la fin de <body> et l'extrait de code fera son effet magique en limitant le nombre de cases à cocher à trois (ou le nombre que vous avez spécifié).

Ici, je vais même vous donner une page de test (collez-la dans un fichier et essayez-la):

 <!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
    function argsToArray(args) {
      var r = []; for (var i = 0; i < args.length; i++)
        r.push(args[i]);
      return r;
    }
    function bind() {
      var initArgs = argsToArray(arguments);
      var fx =        initArgs.shift();
      var tObj =      initArgs.shift();
      var args =      initArgs;
      return function() {
        return fx.apply(tObj, args.concat(argsToArray(arguments)));
      };
    }
    var salutation = argsToArray(document.getElementsByClassName('salutation'));
    salutation.forEach(function(checkbox) {
      checkbox.addEventListener('change', bind(function(checkbox, salutation) {
        var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
        if (numChecked >= 3)
          checkbox.checked = false;
      }, null, checkbox, salutation), false);
    });
</script></body></html>

Répondu el 6 de Mai, 2010 par Delan Azabani (33013 Points )

Validation jQuery en utilisant la classe au lieu du nom valeur

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Validation jQuery en utilisant la classe au lieu du nom valeur

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: