JQuery valider dynamiquement ajouter des règles

Question

J'utilise actuellement le plugin validate pour valider un formulaire (en utilisant les contrôles ASP.Net). J'ai dépouillé les règles de la configuration standard dans l'échange de méthode form.validate:

$("form").validate({ 

    rules: { 
     ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required" 
    } 

}); 

J'ai maintenant ces différentes fonctions qui ajoutent la ruless en fonction de ce bouton est cliqué. Cela fonctionne très bien pour les zones de texte, mais pour un RadiobuttonList lorsque le plug-in tente d'ajouter la règle, une erreur indique que l'élément est indéfini.

function addRuleSet() { 
    $("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true }); 

}

Je pense que le problème est que je suis en utilisant l'attribut name (asp met $ en) pour définir le groupe que les boutons radio appartiennent à au lieu d'un identifiant (mais dans la statique tous les éléments sont définis en utilisant l'attribut name.Mais je ne sais pas comment contourner l'ajout d'une règle pour un groupe de boutons radio associés, tout conseil serait apprécié

PS J'ai vraiment besoin d'appeler la RadioButtonList plutôt que les boutons radio individuels

Answer 1

Vous pouvez également appliquer une règle en définissant des classes sur l'élément. Par exemple, si vous donnez la classe "required" à une entrée, la règle requise s'applique à cet élément. Pour ce faire, vous utiliseriez la propriété CssClass sur le contrôle. Vous devrez peut-être tester des contrôles composés, tels que RadioButtonList, pour vous assurer que la classe est appliquée aux éléments d'entrée générés, et non au conteneur. Si vous avez des problèmes avec cela, une façon de le faire serait d'ajouter la classe en utilisant jQuery après le chargement de la page basée sur un sélecteur.

<asp:RadioButtonList id="RadList" runat="server" CssClass="required"> 
    ... 
</asp:RadioButtonList> 

ou

<script type="text/javascript"> 
    $(function() { 
      $(':radio').addClass('required'); 
      $('form').validate(); 
    }); 
</script> 

Pour un complexe, fondé sur des règles de classe vous pouvez ajouter de nouvelles règles en utilisant addClassRules.

<script type="text/javascript"> 
    $(function() { 
     $.validator.addClassRules({ 
      range0to10: { 
        range: [0, 10] 
      }, 
      name: { 
        minlength: 2, 
        required: true 
      } 
     }); 
     $('form').validate(); 
    }); 
</script> 

<form ... > 
<input type="text" name="rating" id="rating" class="range0to10" /> 
<input type="text" name="firstName" id="firstName" class="name" /> 
<input type="text" name="lastName" id="lastName" class="name" /> 
</form> 

Answer 2

Après des jours de cela me rend fou, posant la question m'a fait penser comment obtenir l'élément de retourner correctement, et je suis tombé sur cette méthode de référencement staright loin qui me permet de le faire:

$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true });