JavaScript と jQuery を使用してテーブルに動的に追加されたテキスト ボックスを検証する方法

テーブル内の動的テキスト ボックスに検証を追加する方法

課題を理解する

テキスト ボックスを含む行が動的に生成されたテーブルがあります。 目標は、ユーザーが [保存] ボタンをクリックしたときにクライアント側で検証できるように、テーブル内のすべてのテキスト ボックスに CSS クラス (input-validation-error など) を追加することです。

クライアント側検証の実装ダイナミック テキスト ボックスの場合

1.適切な HTML 構造を確認します:

クライアント側検証を有効にするには、必須フィールドに特定の data-val 属性を含め、検証メッセージにメッセージ プレースホルダーを含める必要があります。さらに、非表示の入力は、行を追加または削除するときにインデクサーを維持するために重要です。

2. JavaScript 関数の設定:

function AddTargetItem(TargetColor_U, D90Target_U, D10Target_U, TargetColor_V, D90Target_V, D10Target_V, Thickness, FilmWidth, TargetDate)  {
  var rowCount = $('#tbTargetDetails tr').length;
  var rowCountBil = rowCount + 1;

  var row = '<tr>

3.動的に追加された行の処理:

新しい行が追加されると、jQuery 検証の目立たないライブラリを再解析する必要があります。

  // Reparse the validator
  form.data('validator', null);
  $.validator.unobtrusive.parse(form); 

4.行の削除:

イベント ハンドラーを組み込むか、各行内の専用ボタンを利用することで、行の削除をオプションで処理できます。行の削除やインデックスの再評価などのシナリオを考慮して、AddTargetItem 関数を更新します。

追加のヒント:

• インライン スタイルの代わりに CSS をスタイル設定に使用することを検討してください。
• 代替案を検討する部分ビューを使用して行を生成するなどのアプローチにより、検証の追加/変更時の保守性が向上します。
• モデル、ビュー、JavaScript 関数にエラーがないか必ずチェックし、意図したロジックと一致していることを確認してください。

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