Aggiunta della convalida condizionale di jQuery all'HTML generato dinamicamente

Question

Ho il seguente scenario HTML:

<div>
    <input id="txt0" type="text" /><input type="checkbox" id="chk0" /></div>
<div>
    <input id="txt1" type="text" /><input type="checkbox" id="chk1" /></div>
<!-- etc -->
<div>
    <input id="txtN" type="text" /><input type="checkbox" id="chkN" /></div>

Se la casella N è selezionata, la casella di testo N è un campo obbligatorio.

Ho appena iniziato a lavorare con una (la?) validazione jQuery e sto cercando di capire come ottenere questa convalida, che sembra un po 'più complessa degli esempi.

Concettualmente penso di voler aggiungere una classe CSS alle mie caselle di controllo, quindi utilizzare addClassRules per aggiungere una regola personalizzata. Tuttavia, la sfida è come specificare la casella di testo pertinente per ciascuna casella di controllo.

Il mio HTML viene generato utilizzando ASP.NET MVC, quindi potrei generare dinamicamente il JavaScript che specifica una regola per ogni casella di controllo, ma questo sembra un po 'prolisso.

Answer 1

Risolto, usando il seguente approccio ...

Ho aggiornato il mio HTML per includere una specifica classe CSS nelle mie caselle di testo ( amount_text_box ) e ho usato il seguente jQuery:

$.validator.addClassRules("amount_text_box", { required: function(element) {
    var chkId = element.id.replace(/txt/, "#chk");
    return $(chkId)[0].checked;
}

Una limitazione è che questo si attiva solo quando lo stato attivo lascia la casella di testo - idealmente la regola si attiva anche quando si fa clic sulla casella di controllo.

Answer 2

Ho fatto una cosa simile, Richard. Anche se mi sono fermato a corto di regola personalizzata. Il mio approccio era quello di aggiungere la classe "richiesto" al tag di input.

In termini di selettore, potresti non avere la tua casella di testo e inserire " share " una classe unica per loro dice class0 .. classN e seleziona un input all'interno di quella classe?

La gentilezza,

Dan