Ajout de la validation conditionnelle jQuery au code HTML généré de manière dynamique

Question

J'ai le scénario HTML suivant:

<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>

Si la case à cocher N est cochée, la zone de texte N est un champ obligatoire.

Je viens de commencer à travailler avec un (le?) validation jQuery et cherche à savoir comment réaliser cette validation, qui semble un peu plus complexe que les exemples.

Sur le plan conceptuel, je pense que je veux ajouter une classe CSS à mes cases à cocher, puis utiliser addClassRules pour ajouter une règle personnalisée. Cependant, le défi consiste à spécifier la zone de texte appropriée pour chaque case à cocher.

Mon code HTML est généré à l'aide de ASP.NET MVC. Je pouvais donc générer dynamiquement le code JavaScript qui spécifierait une règle pour chaque case à cocher, mais cela semble un peu long.

Answer 1

Résolu, en utilisant l'approche suivante ...

J'ai mis à jour mon code HTML pour inclure une classe CSS spécifique dans mes champs de texte ( amount_text_box ) et utilisé le code jQuery suivant:

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

Une limitation est que cela ne se déclenche que lorsque le focus quitte la zone de texte - idéalement, la règle se déclencherait également lorsque la case à cocher était cochée.

Answer 2

J'ai fait la même chose, Richard. Bien que je me suis arrêté la règle personnalisée. Mon approche consistait à ajouter la classe "requis" à la balise input.

En ce qui concerne votre sélecteur, ne pouvez-vous pas entrer votre zone de texte et votre entrée "share"? une classe qui leur est propre, par exemple class0 .. classN et sélectionnez une entrée dans cette classe?

gentillesse,

Dan