如何使用 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中文網其他相關文章！