Convalida JQuery aggiunge dinamicamente regole

Question

Attualmente sto usando il plugin validate per validare un form (usando i controlli ASP.Net). Ho eliminato le regole dall'installazione standard all'interno del metodo form.validate, ovvero:

    $("form").validate({

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

});

Ora li ho in varie funzioni che aggiungono la governante a seconda del pulsante su cui si fa clic. Funziona bene con le caselle di testo, ma per un RadiobuttonList quando il plugin tenta di aggiungere la regola c'è un errore che dice che l'elemento non è definito.

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

}

Penso che il problema sia che sto usando l'attributo name (asp put $ in) per definire il gruppo a cui appartengono i pulsanti di opzione anziché un ID (ma nelle impostazioni statiche tutti gli elementi sono definiti usando il nome Comunque non sono sicuro di come aggirare l'aggiunta di una regola per un gruppo di pulsanti di opzione associati, qualsiasi consiglio sarebbe apprezzato.

PS Devo davvero chiamare RadioButtonList anziché i singoli pulsanti di opzione.

Answer 1

Puoi anche applicare una regola impostando le classi sull'elemento. Ad esempio, se dai la classe "richiesto" a un input, quindi la regola richiesta si applica a quell'elemento. Per fare ciò, dovresti usare la proprietà CssClass sul controllo. Potrebbe essere necessario sperimentare controlli composti, come RadioButtonList, per assicurarsi che la classe venga applicata agli elementi di input generati, non al contenitore. Se hai problemi con questo, un modo per farlo sarebbe aggiungere la classe usando jQuery dopo che la pagina si è caricata in base a un selettore.

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

o

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

Per una regola complessa basata sulla classe puoi aggiungere nuove regole usando 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

Dopo giorni in cui mi ha fatto impazzire, porre la domanda mi ha fatto pensare a come far tornare l'elemento in modo corretto, e mi sono imbattuto in questo metodo di riferimento della stella stellare che mi permette di farlo:

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