jQuery Girl
  1. jQuery Girl
  3. Comment effectuer une validation conditionnelle côté client par le plugin jquery validate
Intereting Posts
Coffeescript – “this” est toujours remplacé par “_this” dans le rappel de flèche en gras Analyse de JSON à partir de Google Map Pourquoi data-position = “fixed” data-tap-toggle = “false” ne fonctionne pas? addMethod () du plugin de validation jQuery affiche une erreur de l’atsortingbut title Comment obtenir la direction et la distance avec l’événement de balayage de jQuery Mobiles Est-il possible d’utiliser ‘>’ pour sélectionner un enfant de cet object? Comment afficher ou masquer l’onglet en fonction de l’URL de la page THEAD et TBODY inclus sur cette table vérifier les formulaires de validation avec le plugin validationengine en JavaScript Distinguer Chrome de Safari en utilisant jQuery.browser Javascript / jQuery majuscule première lettre de variable avec accents Événement de la molette de calendrier complet prev next Comment déclencher la validation sur datepicker de l’interface utilisateur jQuery une fois la date sélectionnée? À toute épreuve RequiredIfTrue ne fonctionne pas pour MVC5? Est-il possible de joindre un fichier à un email en JavaScript?

Comment effectuer une validation conditionnelle côté client par le plugin jquery validate

ici je donne mon html. J’ai une liste déroulante qui montre peu d’informations sur les produits et les loisirs par case à cocher. Je veux que si l’utilisateur sélectionne le produit iPod, la validation ne se déclenchera pas pour les cases à cocher des hobbies autrement sage comment effectuer ce type de validation conditionnelle par le plugin jquery validate en ajoutant des règles jquery. 

 
 
DateValTest
 
 
  
  -- Select Product-- IPhone MacBook Pro iPod   
 
 
 
 Hobbies
                  

En ce moment je fais la validation côté client par cette voie 

  var declarationsError = $('#Hobbies-error'); $('form').submit(function () { if ($("#SelectedProductId option:selected").text() != 'iPod') { if ($(".hobbycls:checkbox:checked").length <= 0) { declarationsError.empty(); declarationsError.append("Select Any Hobbie's checkbox"); declarationsError.show(); return false; } else { declarationsError.empty(); declarationsError.hide(); } } declarationsError.hide(); return true; }); $('.hobbycls').change(function () { if ($(this).is(':checked')) { declarationsError.empty(); declarationsError.hide(); // hide error message } });

le script ci-dessus fonctionne bien, mais je veux faire la même chose en utilisant jquery validate plugin ajoutant des règles.

alors s’il vous plaît guidez-moi ce que jquery valider le code que je dois écrire pour effectuer la même chose. montrez-moi comment faire ce type de validation conditionnelle en ajoutant des règles jquery. Merci

Vous avez des erreurs dans le code HTML produit:

  1. même identifiant pour différents éléments (ie: Hobbies)
  2. étiquettes liées à aucun élément: ie: étiquette pour = “Produits”

Vous pouvez utiliser le validateur jQuery pour append une nouvelle règle afin de répéter exactement ce que vous faites dans vos deux fonctions jQuery:

  1. $ (‘formulaire’). submit (function () {
  2. $ (‘. hobbycls’). change (function () {

Vous avez oublié de donner l’élément Hobbies-error, j’ai donc utilisé un div.

Dans l’extrait suivant: 

 var validator; // a new rule is required to test if iPod is selected and checkboxes are... $.validator.addMethod('checkboxMaxIfiPodNotSelected', function (value, elem, param) { var selectedOptionVal = $(param.selEleiSiPod).val().sortingm(); var selectedOptionText = $(param.selEleiSiPod).text().sortingm(); if (selectedOptionText != 'iPod') { if (selectedOptionVal.length > 0) { if ($(':checkbox.' + elem.classList[0] + ":checked").length <= param.max) { $('#Hobbies-error').empty().append("Select Any Hobbie's checkbox").show(); return false; } } else { $('#Hobbies-error').empty().append("Select a Product").show(); return false; } } $('#Hobbies-error').empty().hide(); return true; }); $(function () { // build the dynamic rules.... var myRules = {}; var myMessages = {}; $(':checkbox.hobbycls').each(function (index, element) { myRules[element.name] = { checkboxMaxIfiPodNotSelected: { max: 0, selEleiSiPod: '#SelectedProductId option:selected' } }; myMessages[element.name] = { checkboxMaxIfiPodNotSelected: function(params, element) { // it's not usefull to return a true error message because I used a div // but this is up to you how to manage and place the errors return ''; } }; }); // use the rules and messages with validator... validator = $('form').validate({ rules: myRules, messages: myMessages, submitHandler: function (form) { // for demo alert('valid form submitted'); // for demo return false; // for demo } }); }); 
     
 
 
DateValTest
 
 
  
   
 
 
 
 Hobbies