在bootstrap下拉菜单中应用jqueryvalidation

我有以下bootstrap下拉菜单：

 Pens 
 
  Nothing selected   
 
Nothing selected
 
Ballpoint Pens
 
Rollerball Pens
 
Fountain Pens
 
Custom pens
 
 
 
  

这个脚本让它下拉：

 $(document.body).on('click', '.dropdown-menu li', function(event) { var $target = $(event.currentTarget); $target.closest('.btn-group').find( '[data-bind="label"]').text( $target.text()).end().children('.dropdown-toggle').dropdown('toggle'); return false; }); 

如何在其上应用jquery validation ，在id为my_li_id_0的元素上引发错误？

Answer 1

jQuery Validate插件只能validationform容器中包含的input ， textarea和select元素。 它无法validation无序列表。 （ 编辑：在较新的版本中，它还可以使用contenteditable属性validation某些类型的元素。 ）

您将不得不构建一个变通方法。 这样的东西……

1. 将事件绑定到Bootstrap下拉菜单，该菜单在用户进行或更改选择时触发。

2. 每当触发＃1中的事件时，将列表中的所需值复制到隐藏的input元素中。

3. 将插件的ignore选项设置为[]这样就不会忽略任何内容并validation隐藏的input元素。

4. 在隐藏input元素的name上设置validation规则。

5. 使用上面＃2函数中的.valid()方法，只要选择被更改，就会触发隐藏input元素的validation测试。

6. 在插件的errorPlacement回调函数中使用条件将validation消息放在与Bootstrap下拉菜单更相关的位置。 您需要一个条件才能保留其他元素的默认错误放置代码。

---

BTW：你的数字id …

…在HTML5中可能在技术上是正确的，但是，以数字开头的id可能是其他方面的问题。 更多信息： HTML中id属性的有效值是什么？