jQuery の目立たない検証を使用してテーブル内の動的テキストボックスにクラス検証を適用する方法

テーブル内の動的テキストボックスのクラス検証の設定

問題の理解

テキストボックスを含む動的テーブルがあり、クラスを適用したいと考えています。これらすべてのテキストボックスを検証します。 jQuery の控えめな検証では、追加されたテキストボックスが登録されず、検証が機能しません。

問題への対処

これを解決するには、次のことを行う必要があります。

• データ属性の追加: 必要な data-val 属性をテキストボックス。
• プレースホルダー要素を生成します: 検証メッセージを表示するためのプレースホルダー要素を作成します。
• 非連続のインデクサーを許可します:インデクサー: 投稿されたファイルに対して非連続のインデクサーを有効にします。 collection.

インデクサーの非表示入力による 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);
});

追加のヒント

• 動的追加後は目立たない検証の再解析が必要ですcontent.
• 非表示のインデクサーを使用すると、連続しない行を削除できます。
• インライン スタイルの代わりに CSS をスタイルに使用します。
• 保守性を高めるために部分ビューの使用を検討してください。

以上がjQuery の目立たない検証を使用してテーブル内の動的テキストボックスにクラス検証を適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。