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 验证，从而引发ID为 my_li_id_0 的元素的错误？

Answer 1

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

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

将事件绑定到Bootstrap下拉菜单，该菜单在用户进行或更改选择时触发。
每当触发＃1中的事件时，将列表中的所需值复制到隐藏的input元素中。
将插件的ignore选项设置为[]，这样就不会忽略任何内容，并且会验证隐藏的input元素。
在隐藏name元素的input上设置验证规则。
使用上面＃2函数中的.valid()方法，只要选择更改，就会在隐藏的input元素上触发验证测试。
在插件的errorPlacement回调函数中使用条件将验证消息放在与Bootstrap下拉菜单更相关的位置。您需要一个条件才能保留其他元素的默认错误放置代码。

BTW：你的数字id ......

<li id="1">

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

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

1 个答案: