首頁 >web前端 >css教學 >如何對錶中動態新增的文字方塊執行客戶端驗證?

如何對錶中動態新增的文字方塊執行客戶端驗證?

Susan Sarandon
Susan Sarandon原創
2024-12-24 15:32:21260瀏覽

How to Perform Client-Side Validation on Dynamically Added Textboxes in a Table?

理解問題

嘗試將驗證類別應用於表中的動態文字方塊時會出現此問題。目標是在按一下「儲存」按鈕時對這些文字方塊執行驗證。

解決方案

要解決此問題,實施以下步驟至關重要:

  1. 包含Data-val 屬性: 將必要的data-val 屬性指派到文字框,以及用於驗證訊息的佔位符元素。這些屬性對於使用 jquery.validate.unobtrusive.js 進行用戶端驗證至關重要。
  2. 初始預設 ClsTargetInfo 物件: 首先將預設 ClsTargetInfo 物件新增至模型中的 TargetInfo 屬性,然後在檢視中產生其 HTML。
  3. 建立一個隱藏元素索引器: 在表格行中,包含索引器的隱藏輸入元素。這允許將非連續索引器發布並綁定到集合。
  4. 複製 HTML 範本: 檢查為表格行產生的 HTML。將其複製到表單標記外部的隱藏元素內,用虛擬字元 (#) 取代所有索引器。
  5. 複製並附加到表: 在 JavaScript 程式碼中,複製新行,更新索引器,並將其附加到表中。
  6. 重新解析驗證器: 新增行後,使用 $.validator.unobtrusive.parse(form) 重新解析驗證器。

附加說明

  • Unobtrusive 驗證依賴解析 data-val 屬性在表單的初始呈現時。因此,新增動態內容時需要重新解析。
  • 索引器的隱藏輸入允許刪除集合中的任何行。
  • 考慮使用 CSS 而不是內聯樣式以獲得更好的可維護性和效能。
  • 純粹在客戶端新增行時,利用部分視圖(BeginCollectionItem 幫助器)更容易維護側面。

以上是如何對錶中動態新增的文字方塊執行客戶端驗證?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn