HTML5中隱藏表單控件的處理是否合理？

Question

增加了HTML5，可以更好地定義表單中的客戶端驗證，而無需使用JavaScript。這個概念已經存在於諸如「maxlength」和「minlength」之類的屬性中。它已經擴展了諸如「必需」和「模式」等屬性。然而，HTML5也定義了這些屬性的限制，WebKit瀏覽器已經實現了這些限制（很可能Firefox和Opera不遠）。

restrictions in question與CSS/JavaScript使用display: none或visibility: hidden CSS規則隱藏時必須處理表單控件的可見性。的限制被定義爲：

4.10.7.1.1隱藏狀態

當input元素的類型屬性是在隱藏的狀態[...]的input元素表示一個值，該值是不旨在由用戶檢查或操縱。

[此外，]

• 的value IDL屬性應用於該元素，並且在模式默認。
• 下面的內容屬性，不得指定，並不適用於元素：accept，alt，autocomplete，checked，dirname，formaction，，formmethod，formnovalidate，formtarget，height，list，max，maxlength，min，multiple ，pattern,placeholder,readonly,required,size,src,step和width。
• 以下IDL屬性和方法並不適用於該元件：checked，files，list，selectedOption，selectionStart，selectionEnd，selectionDirection，valueAsDate，和valueAsNumber IDL屬性; select(),setSelectionRange(),stepDown()和stepUp()方法。
• input和change事件不適用。

乍一看，這是有道理的說，驗證不應該需要對錶格進行控制用戶對控制權。而且，對於使用默認表單控件元素構建的表單，這些都是有道理的。但是現在，建立遠程表單控件已經出現了一個問題。

無論是HTML5還是CSS3（也不是主流瀏覽器）都使得樣式表單控件變得更加簡單。 <select>元素在樣式方面仍然受到很大限制，並且<input>和<button>元素具有令人討厭的樣式規則（對於非IE瀏覽器，幾乎不可能實現CSS瀏覽器定位）。因此，當我的設計師需要「漂亮」的表單控件時，他們可能需要使用HTML，CSS和JavaScript重建。模擬控件將遠程控制CSS隱藏的實際控件。這適用於<select>，<input type="checkbox">和<input type="radio">元素對我來說，考慮到required屬性時，所有這些都導致WebKit瀏覽器的問題。

由於HTML5規範指出某些屬性（例如required）不能存在於隱藏窗體控件上，因此瀏覽器將被要求響應無效屬性。 WebKit瀏覽器通過在所有未提交形式（而不是觸發JavaScript的submit事件）響應。我現在遇到了一個<select>元素的錯誤。

鉻失敗，此錯誤到控制檯：

的與名稱=「元素名稱」無效形式的控制不是可聚焦。

Safari瀏覽器無法通過顯示在與消息的窗口底部的灰色條：

請在列表

---

所以，我關心的是選擇一個項目不管HTML5是否過於限制，或者我正在錯誤地處理這個問題。或者：

1. HTML5的規範存在缺陷，並且增加了額外的限制而沒有其他解決方案。 HTML5假設如果一個窗體控件不可見，用戶不應該能夠與它交互。這可以防止開發人員利用HTML5的驗證屬性來控制我們遠程控制的元素，同時隱藏原始表單控件。我們仍然沒有能力僅使用CSS來創建我們的自定義控件，這需要我們仍然自己構建它們。
2. 我錯誤地處理遠程表單控件。因爲我使用的是「老」技術來解決這非常可能已經被重新定義的問題，它可能是我的做法是不合時宜的。也有可能，因爲WebKit是目前唯一處理此限制的WebKit，所以WebKit有一個解決方法，我尚未找到此解決方案。

，我可以在那一刻想到的唯一解決方法是

• 刪除受限屬性，每當我動態隱藏與JavaScript中，表單控件這將意味着我犧牲了HTML5的驗證，
• 臨時顯示並立即隱藏違規表單控件，但我不確定何時完成此操作，因爲從未觸發過submit事件，並且可以提交表單而不觸發提交按鈕上的click事件或
• 使用novalidate屬性，但我還是失去了HTML5驗證。

所以我會在這個尋找正確的還是我失去了一些東西？

P.S.抱歉的長度。休息後的一切都是我的「tl; dr」。

Answer 1

首先你會混淆兩件事。如果HTML5規範說明隱藏狀態，則規範僅意味着將type屬性設置爲值「hidden」的輸入元素。在這種情況下，輸入未被驗證，這意味着輸入不能失效。瀏覽器不會中止表單提交。

你的問題是另一個。你有一個真正的無效元素，它只是在視覺上隱藏（使用display：none）並被另一個元素（或一組其他元素）所替代。在你的情況下，問題如下：按照規範進行交互式表單驗證時，瀏覽器必須關注第一個無效元素，並至少爲此元素顯示驗證消息。問題是，瀏覽器既不能聚焦隱藏的元素，也不能在此元素下面顯示驗證消息。這意味着瀏覽器停止表單提交，但有奇怪的用戶界面來顯示驗證問題。

現在你的：這是否有意義？是的，它確實！如果更改表單元素的UI，則還必須爲驗證消息實現UI。 （如果你想定製一些東西，你可以定製你想使用的一切）。 HTML5爲您提供了一個API來實現這一點。

您必須綁定select元素的無效事件，然後阻止默認操作（如果它是表單的第一個無效事件）並將您自己的驗證工具提示放置到樣式化的select元素。

在我的HTML5表單填充（webshims lib）中，我已經使用代碼將本機元素（通過API）與另一個元素進行鏈接，並生成簡單的驗證工具提示。

我創建了一個簡單的jsfiddle，它模仿了一個select-replacement，並展示瞭如何使用自定義表單控件實現HTML5表單驗證。你可以找到example here。