在bootstrap下拉菜单中应用jquery验证

Question

我有以下bootstrap下拉菜单:

<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 验证,在id为my_li_id_0的元素上引发错误？

Answer 1

的jQuery验证插件可以只验证input,textarea以及select包含在内的元件form的容器中.它无法验证无序列表.(编辑:在较新的版本中,它还可以使用contenteditable属性验证某些类型的元素.)

你必须构建一个变通方法.像这样......

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

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

3. 将插件的ignore选项设置为,[]以便不会忽略任何input内容并验证隐藏的元素.

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

5. 使用.valid()上面#2函数中的方法,input只要选择更改,就会触发隐藏元素的验证测试.

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

BTW:你的数字id......

<li id="1">

......在HTML5中可能在技术上是正确的,但是,id从数字开始可能是其他领域的问题.更多信息: HTML中id属性的有效值是什么？