使用Jquery验证选择框问题

时间:2010-07-04 15:03:16

标签: jquery jquery-plugins jquery-validate

我的页面上有9个选择框,其中包含许多商业子类别。我要求用户从9个选项中的1个中选择一个选项。为了更好地提升用户体验,我使用CSS隐藏了所有选择框,并生成一个动态选择框。从生成的下拉列表中选择类别时,将显示CSS隐藏的子类别选择框。

我的问题是,当我提交表单时,验证似乎不起作用。在使用firebug进行进一步检查时,看起来验证确实会触发,但仅适用于第一个隐藏的选择框(进食和饮水)。如果你看一个我放在一起的示例页面,我希望这个类别可以饮食:

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

如果您选择任何其他类别并将子类别留空,我会收到一条错误消息,该消息仍然附加到第一个项目,但不能被视为其显示的设置:无。奇怪的是,一旦你点击子类别选择框,错误信息就会附加到正确的项目,但是我真的需要它来处理提交。

这个真的让我疯了。请帮忙

1 个答案:

答案 0 :(得分:1)

这里有几件事情在发挥作用。

除了前两个选项之外的所有其他选项在提交时未验证的原因是因为您已将所有其他选项命名为相同的选项(“category []”)。在查看validate.js代码时,在构建要在提交期间检查的元素列表时,它只选择具有附加任何规则的给定名称的第一个元素(第444行)。由于它查找元素是否具有任何规则(按名称)的方式,它总是选择名为“cateogory []”的第一个选择,即使您已将规则实际添加到其他选择之一。

但是,当您发现时,当您的选择获得焦点(并丢失它或被更改)时,验证将触发。执行此操作的过程与提交表单时运行的过程是分开的,必须检查所有表单元素。

您可以使用Firebug在jquery.validate.js文件中设置断点,以便查看那里发生的事情。