如何使用 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中文網其他相關文章！