テーブルに動的に追加されたテキストボックスに対してクライアント側の検証を実行するにはどうすればよいですか?

問題の理解

この問題は、テーブル内の動的テキストボックスに検証クラスを適用しようとすると発生します。目的は、[保存] ボタンをクリックしたときにこれらのテキスト ボックスの検証を実行することです。

解決策

この問題を解決するには、次の手順を実行することが重要です。

1. Data-val 属性を含める:必要な data-val 属性を、検証メッセージのプレースホルダー要素とともにテキストボックスに割り当てます。これらの属性は、jquery.validate.unobtrusive.js を使用したクライアント側の検証にとって重要です。
2. 初期デフォルト ClsTargetInfo オブジェクト: まず、デフォルトの ClsTargetInfo オブジェクトをモデルの TargetInfo プロパティに追加し、そのHTMLをview.
3. インデクサーの非表示要素を作成します: テーブル行内に、インデクサーの非表示の入力要素を含めます。これにより、非連続のインデクサーをポストしてコレクションにバインドできるようになります。
4. HTML テンプレートのコピー: テーブル行に対して生成された HTML を検査します。これをフォーム タグの外側に配置された非表示要素内にコピーし、すべてのインデクサーをダミー文字 (#) に置き換えます。
5. Clone and Append to Table: JavaScript コードで、新しい行を複製します。 、インデクサーを更新し、それをテーブルに追加します。
6. 再解析バリデータ: 新しいものを追加した後行、$.validator.unobtrusive.parse(form) を使用してバリデータを再解析します。

追加メモ

• 目立たない検証はデータの解析に依存します。フォームの最初のレンダリング時の val 属性。したがって、動的コンテンツを追加する場合は再解析が必要です。
• インデクサーの非表示の入力により、コレクション内の任意の行を削除できます。
• 保守性を高めるために、インライン スタイルの代わりに CSS を使用することを検討してください。
• 純粋にクライアント上で行を追加する際の保守性を容易にするために、部分ビュー (BeginCollectionItem ヘルパー) を利用します。側面。

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