将 jQuery 条件验证添加到动态生成的 HTML答案

【问题标题】：Adding jQuery conditional validation to dynamically-generated HTML将 jQuery 条件验证添加到动态生成的 HTML
【发布时间】：2010-11-28 19:09:57
【问题描述】：

我有以下 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>

如果复选框N被选中，那么文本框N是必填字段。

我刚刚开始使用（？）jQuery validation 模块并试图弄清楚如何实现此验证，这似乎比示例复杂一点。

从概念上讲，我想在我的复选框中添加一个 CSS 类，然后使用 addClassRules 添加自定义规则。然而，挑战在于如何为每个复选框指定相关的文本框。

我的 HTML 是使用 ASP.NET MVC 生成的，因此我可以动态生成为每个复选框指定规则的 JavaScript，但这似乎有点冗长。

【问题讨论】：

标签： jquery asp.net-mvc validation jquery-validate

【解决方案1】：

我也做过类似的事情，理查德。尽管我没有遵守自定义规则。我的方法是将“必需”类添加到输入标签中。

就你的选择器而言，你能不能让你的文本框输入“共享”一个他们独有的类，比如 class0 .. classN 并在该类中选择一个输入？

善良，

丹

【讨论】：

【解决方案2】：

已解决，使用如下方法...

我更新了我的 HTML 以在我的文本框 (amount_text_box) 中包含一个特定的 CSS 类，并使用了以下 jQuery：

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

一个限制是，这仅在焦点离开文本框时触发 - 理想情况下，该规则也会在单击复选框时触发。

【讨论】：