HTML5錯誤消息

Question

在我的應用程序中，我有多個選項卡。在選項卡中，我有輸入字段，我想在客戶端驗證這些字段。爲此，我嘗試使用HTML5屬性，例如required屬性或pattern屬性。如果在第一個選項卡中選擇了空字段（需要字段），則會出現錯誤消息The field is required，但是當我在其他選項卡（例如第三個選項卡中）中有空字段並且選擇了第一個選項卡時，錯誤消息不會出現。

問題 在這種情況下，有沒有辦法組織HTML5驗證？

Answer 1

您是否隱藏表格元素display: none？如果你的元素是不可見的，他們will not trigger the validation UI：

報告在未處理無效控件提供給用戶的 元件中的至少一個的約束問題。用戶代理 可以通過運行該元素的聚焦步驟並且可以改變該文檔的滾動位置 或者執行一些其他動作，使得元素 引起用戶的注意，可以將這些元素中的一個聚焦在該過程中。用戶代理可能會報告多個違反約束的 。如果合適的話，用戶代理可以合併相關約束報告 違例報告（例如，如果 組中的多個單選按鈕被標記爲需要，僅需要報告一個錯誤）。 如果控件的一個 未呈現（例如，它具有隱藏的 屬性集），則用戶代理可能會報告腳本錯誤。

在這種情況下，你將不得不聽invalid事件與自己的腳本，並進行適當的行動。