jQuery Validation utilisant la classe au lieu de la valeur du nom

Je voudrais valider un formulaire en utilisant le plugin jquery validate, mais je ne peux pas utiliser la valeur ‘name’ dans le html – car c’est un champ également utilisé par l’application serveur. Plus précisément, je dois limiter le nombre de cases à cocher vérifiées dans un groupe. (Maximum de 3.) Tous les exemples que j’ai vus utilisent l’atsortingbut name de chaque élément. Ce que j’aimerais faire, c’est utiliser la classe à la place, puis déclarer une règle pour cela.

html

Cela marche:

 

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

  

javascript:

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

Est-il possible de le faire – existe-t-il un moyen de cibler la classe au lieu du nom dans les options de règles? Ou dois-je append une méthode personnalisée?

Cheers, Matt

Vous pouvez append les règles basées sur ce sélecteur à l’aide de .rules("add", options) , supprimez simplement les règles que vous voulez classer en fonction de vos options de validation et après avoir appelé $(".formToValidate").validate({... }); , faites ceci:

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

Une autre façon de le faire consiste à utiliser addClassRules . Il est spécifique aux classes, tandis 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.

Je sais que c’est une vieille question. Mais moi aussi, j’avais besoin de la même chose récemment, et j’ai eu cette question de stackoverflow + une autre réponse de ce blog. La réponse qui était dans le blog était plus simple car elle se concentre spécialement sur ce type de validation. Voici comment faire.

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

Cette méthode ne vous oblige pas à valider la méthode ci-dessus.

J’espère que cela aidera aussi quelqu’un à l’avenir. Source ici

Voici la solution en utilisant jQuery:

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

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

Mettez ceci dans un bloc de script à la fin de et l’extrait fera sa magie, en limitant le nombre de cases à cocher maximum à trois (ou quel que soit le nombre que vous spécifiez).

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

             

Comme pour moi, certains éléments sont créés lors du chargement de la page et certains sont ajoutés dynamicment par l’utilisateur. Je l’ai utilisé pour m’assurer que tout restait sec.

Sur submit, trouvez tout avec la classe x, supprimez la classe x, ajoutez la règle x.

 $('#form').on('submit', function(e) { $('.alphanumeric_dash').each(function() { var $this = $(this); $this.removeClass('alphanumeric_dash'); $(this).rules('add', { alphanumeric_dash: true }); }); }); 

Si vous voulez append une méthode personnalisée, vous pouvez le faire

(dans ce cas, au moins une case à cocher sélectionnée)

  

en Javascript

 var tags = 0; $(document).ready(function() { $.validator.addMethod('arrayminimo', function(value) { return tags > 0 }, 'Selezionare almeno un Opzione'); $.validator.addClassRules('check_secondario', { arrayminimo: true, }); validaFormRichiesta(); }); function validaFormRichiesta() { $("#form").validate({ ...... }); } function test(n) { if (n.prop("checked")) { tags++; } else { tags--; } }