Jquery 验证的选择框问题
我的页面上有 9 个选择框，其中包含许多企业子类别。我要求用户仅从 9 个选项中选择一个选项。为了让用户体验更好，我用 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
如果您选择任何其他类别并将子类别留空，我会收到一条错误消息，该消息仍然附加到第一项，但不能被视为其设置为显示：无。奇怪的是，一旦您单击子类别选择框，错误消息就会将其自身附加到正确的项目中，但我确实需要它才能提交。
这真的让我抓狂。请帮忙
I have 9 select boxes on my page containing lots of subcategories for businesses. I require the user to select an option from only 1 of the 9 selects. To make the user experience better I hide all of the select boxes with CSS and generate a dynamic select box of categories. When a category is selected from the generated dropdown, the subcategories select box which is hidden by CSS is displayed.
My problem is when I submit the form the validation does not appear to work. On further inspection with firebug it looks like the validation does fire, but only for the first hidden select box (eating and drinking). If you look at an example page I have put together everything works as I would hope for the category eating and drinking:
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
If you select any another category and leave the subcategory blank I get an error message which is still attached to first item but cant be seen as its set to display:none. Strangely the error message does append itself to the correct item once you click on the subcategory select box, however I really need it to work on submit.
This one is really driving me nuts. Please help
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里有几件事在起作用。
除了前两个选项之外的所有其他选项在提交时都不会验证的原因是因为您已将所有其余选项命名为相同的内容（“category[]”）。在查看 validate.js 代码时，在构建要在提交期间检查的元素列表时，它仅选择具有给定名称且附加了任何规则的第一个元素（第 444 行）。由于它查找元素是否有任何规则（按名称）的方式，它总是选择名称为“cateogory[]”的第一个选择，即使您实际上已将该规则添加到其他选择之一。
然而，正如您发现的那样，当您的选择接收焦点（并失去焦点或被更改）时，验证将触发。执行此操作的过程与提交表单时运行的过程是分开的，在提交表单时必须检查所有表单元素。
您可以使用 Firebug 在 jquery.validate.js 文件中设置断点，以便您可以看到那里发生了什么。
There are a couple of things at play here.
The reason all your other options besides the first two don't validate on submit is because you have named all the rest of the selects the same thing ("category[]"). In looking through the validate.js code, when building up a list of elements to check during submit, it only picks the first element with the given name that has any rules attached to it (line 444). Because of the way it looks up whether an element has any rules (by name), it always chooses your first select with the name "cateogory[]", even when you have actually added the rule to one of your other selects.
However, the validate WILL fire when your select receives focus (and loses it, or gets changed), as you discovered. The process for doing that is separate from the process that runs when submitting the form where it has to check all the form elements.
You can use Firebug to set breakpoints in the jquery.validate.js file so you can see what is happening there.