如何使用 jQuery 非侵入式验证将类验证应用于表中的动态文本框？

为表中的动态文本框设置类验证

理解问题

您有一个带有文本框的动态表，并且想要应用类对所有这些文本框的验证。 jQuery 的非侵入式验证未注册添加的文本框，导致验证无法正常工作。

解决问题

要解决此问题，您需要：

• 添加数据属性： 将必要的 data-val 属性添加到文本框。
• 生成占位符元素： 创建用于显示验证消息的占位符元素。
• 允许非连续索引器： 包含隐藏输入索引器为发布的内容启用非连续索引器集合。

使用索引器隐藏输入更新了 HTML

@for (int i = 0; i < Model.TargetInfo.Count; i++)
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_U, new { id = "", @class = "form-control" })
            @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_U)
            <input type="hidden" name="TargetInfo.Index" value=@i />
        </td>
        <!-- Other columns with similar markup -->
    </tr>
}

使用非连续索引器更新了 JavaScript

var form = $('form');
var newrow = $('#newrow');
var tablebody = $('#tablebody');

$("#btnAddTarget").click(function() {
    var index = (new Date()).getTime();
    var clone = newrow.clone();
    clone.html($(clone).html().replace(/#/g, index));
    var row = clone.find('tr');
    tablebody.append(row);

    // Reparse the validator using unobtrusive validation
    form.data('validator', null);
    $.validator.unobtrusive.parse(form);
});

其他提示

• 添加动态后需要重新解析不显眼的验证内容。
• 隐藏索引器可以删除不连续的行。
• 使用 CSS 进行样式设置，而不是内联样式。
• 考虑使用部分视图以实现可维护性。

以上是如何使用 jQuery 非侵入式验证将类验证应用于表中的动态文本框？的详细内容。更多信息请关注PHP中文网其他相关文章！