在引导下拉菜单上应用 jquery 验证

Question

我有以下引导下拉菜单：

<div class="form-group">
    <label for="name" class="col-md-3 control-label">Pens</label>
    <div class="col-md-9">
        <div class="btn-group btn-input">
            <button id="pensList"  type="button"
                class="btn btn-default dropdown-toggle form-control"
                data-toggle="dropdown">
                <span data-bind="label">Nothing selected</span> 
                <span class="caret"></span>
            </button>
            <ul id="elements" class="dropdown-menu">
              <li id="my_li_id_0"><a href="#">Nothing selected</a></li>
              <li id="my_li_id_1"><a href="#">Ballpoint Pens</a></li>
              <li id="my_li_id_2"><a href="#">Rollerball Pens</a></li>
              <li id="my_li_id_3"><a href="#">Fountain Pens</a></li>
              <li id="my_li_id_4"><a href="#">Custom pens</a></li>
            </ul>
        </div>
    </div>
</div>

还有这个让它下​​拉的脚本：

$(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 插件只能验证form 容器中包含的input、textarea 和select 元素。它无法验证无序列表。 （编辑：在较新的版本中，它还可以使用 contenteditable 属性验证某些类型的元素。）

您必须构建一个解决方法。像这样的...

1. 将事件绑定到 Bootstrap 下拉菜单，每当用户做出或更改选择时就会触发该事件。

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

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

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

5. 在上面#2 的函数中使用.valid() 方法，在更改选择时触发对隐藏的input 元素的验证测试。

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

---

顺便说一句：你的数字id...

<li id="1">

...在 HTML5 中可能在技术上是正确的，但是，以数字开头的 id 在其他领域可能是个问题。更多信息：What are valid values for the id attribute in HTML?