ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery の目立たない検証を使用してテーブル内の動的テキストボックスにクラス検証を適用する方法

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

Linda Hamilton
リリース: 2024-12-22 12:30:11
オリジナル
324 人が閲覧しました

How to Apply Class Validation to Dynamic Textboxes in a Table Using jQuery Unobtrusive Validation?

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

問題の理解

テキストボックスを含む動的テーブルがあり、クラスを適用したいと考えています。これらすべてのテキストボックスを検証します。 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート