選擇框問題與JQuery驗證

Question

我有9個選擇框在我的網頁包含許多子類別的企業。我要求用戶只從9個選擇中的1箇中選擇一個選項。爲了讓用戶體驗更好，我用CSS隱藏了所有的選擇框並生成一個動態的類別選擇框。當從生成的下拉列表中選擇一個類別時，將顯示CSS隱藏的子類別選擇框。

我的問題是，當我提交表單驗證似乎不起作用。在進一步檢查螢火蟲時，驗證確實會觸發，但僅限於第一個隱藏的選擇框（吃喝）。如果你看一個例子頁面我已經把一切都按我希望的類別大吃大喝：

http://www.clawg.co.uk/jstest/errortest.html

* No category submit form show error message 
* No subcategory submit form show error message 
* Change category or subcategory to blank show error message 

如果您選擇任何其他類別，然後離開子類別空白，我得到一個錯誤消息仍然附加到第一項，但不能被視爲其設置顯示：無。奇怪的是，一旦你點擊子類別選擇框，錯誤信息會自行附加到正確的項目，但是我真的需要它來處理提交。

這一個真的讓我瘋狂。請幫忙

Answer 1

這裏有幾件事情在玩。

除了前兩個選項之外，所有其他選項都不會在提交時進行驗證的原因是因爲您已將所有其他選項命名爲相同的東西（「category []」）。在查看validate.js代碼時，在構建要在提交期間檢查的元素列表時，它只會選擇具有附加任何規則的給定名稱的第一個元素（第444行）。由於它查找元素是否有任何規則（通過名稱），它總是選擇名爲「cateogory []」的第一個選擇，即使實際上已將規則添加到其他選擇之一。

但是，如您所發現的那樣，當您的選擇接收到焦點（並且丟失它或得到改變）時，驗證將會觸發。這樣做的過程與提交表單時必須檢查所有表單元素的過程是分開的。

您可以使用Firebug在jquery.validate.js文件中設置斷點，以便您可以看到發生了什麼。