选择框问题与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文件中设置断点，以便您可以看到发生了什么。