ホームページ >ウェブフロントエンド >CSSチュートリアル >テーブル内の動的テキストボックスの検証クラスを設定するにはどうすればよいですか?

テーブル内の動的テキストボックスの検証クラスを設定するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2025-01-01 02:23:08928ブラウズ

How to Set Validation Classes for Dynamic Textboxes in a Table?

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

この問題は、動的テキストボックスの行を含むテーブルを作成するときに発生します。すべてのテキストボックスに検証クラスを追加することです。

元のコードは、jQuery を使用して追加しようとしましたinput.input-validation-error クラスをテーブル内のすべてのテキストボックスに追加しましたが、クラスを正しく適用できませんでした。これを解決するには、次の手順を実行します。

1.テキストボックスへの Data-Val 属性の追加:

クライアント側での検証をシームレスに行うには、検証メッセージを表示するために必要な data-val 属性をテキストボックスとプレースホルダー要素に含めることが重要です。これにより、jquery.validate.unobtrusive.js がクライアント側の検証を実行できるようになります。

2.デフォルトの ClsTargetInfo オブジェクトの提供:

デフォルトの ClsTargetInfo オブジェクトを使用して TargetInfo プロパティを初期化します。このオブジェクトの HTML 表現はビュー内に生成されます。

3.動的行の HTML を変更します:

HTML 内で、テキストボックスから不要な ID 属性を削除し、検証メッセージのプレースホルダー要素を追加します。また、非連続のインデックス作成を許可するために、インデクサーの非表示の入力を必ず含めてください。

4.新しい行の HTML の生成:

フォーム タグの外側に隠し要素を作成し、そこに動的行の HTML をコピーします。すべてのインデクサー インスタンスをダミー文字に置き換え、ダミー文字と一致するように非表示の入力の値を更新します。

5.新しい行を追加するための JavaScript:

JavaScript を更新して新しい行を複製し、ダミーのインデクサー文字を一意のインデクサーに置き換えて、新しい行を追加します。新しい行を追加してクライアント側検証を有効にした後は、バリデーターを再解析することを忘れないでください。

6.追加メモ:

  • スタイル設定にはインライン スタイルではなく CSS を使用することを推奨します。
  • インデックス作成には削除ボタンの代わりに非表示の入力を使用することを検討してください。
  • BeginCollectionItem を使用する保守性を向上させるためのヘルパー。

以上がテーブル内の動的テキストボックスの検証クラスを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。