在引导下拉菜单中应用jquery验证 [英] Apply jquery validation on bootstrap drop-down menu

问题描述

我有以下bootstrap下拉菜单：

 < div class =form-group> 
< label for =nameclass =col-md-3 control-label> Pens< / label> 
< div class =col-md-9> 
< div class =btn-group btn-input> 
< button id =pensListtype =button
 class =btn btn-default dropdown-toggle form-control
 data-toggle =dropdown> 
< span data-bind =label>未选择< / span> 
< span class =caret>< / span> 
< / button> 
< ul id =elementsclass =dropdown-menu> 
< li id =my_li_id_0>< a href =＃>没有选择< / a>< / li> 
< li id =my_li_id_1>< a href =＃>圆珠笔< / a>< / li> 
< li id =my_li_id_2>< a href =＃>滚珠笔< / a>< / li> 
< li id =my_li_id_3>< a href =＃>喷泉笔< / a>< / li> 
< li id =my_li_id_4>< a href =＃>自定义笔< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

此脚本将其下拉：

$ {code $ $（document.body）.on（'click'，'.dropdown-menu li'，
function（event）{
var $ target = $（event.currentTarget）;

$ target.closest（'。btn-group'）。find（
'[data-bind =label]'）。 b $ b $ target.text（））。end（）。children（'。dropdown-toggle'）。dropdown（'toggle'）;

return false;
}）;

如何将 jquery 验证它会引发id my_li_id_0 的元素错误？

解决方案

jQuery Validate插件可以>只有验证输入， textarea 和选择元素包含在表单中。它无法验证无序列表。 （编辑）在较新的版本中，它还可以使用 contenteditable 属性来验证某些种类的元素。

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

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




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




3. 将插件的 ignore 选项设置为 [] 所以没有任何东西被忽略和隐藏输入元素被验证。




4. 隐藏的元素元素名称




5. 在上面＃2的函数中使用 .valid（）方法来触发隐藏的输入的验证测试




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

---

BTW：您的数字 id ...

 < li id =1> 
  

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

I have the following bootstrap drop-down menu:

<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>

And this script for making it drop down:

$(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;
});

How can I apply jquery validation on it, raising error on the element with id my_li_id_0?

解决方案

The jQuery Validate plugin can only validate input, textarea, and select elements contained within a form container. It cannot validate an unordered list. ( EDIT: In newer versions, it can also validate certain kinds of elements with a contenteditable attribute. )

You'll have to construct a workaround. Something like this...

1. Bind an event to the Bootstrap drop-down menu that's fired whenever the user makes or changes a selection.

2. Whenever that event from #1 is fired, copy the desired value from the list into a hidden input element.

3. Set the plugin's ignore option to [] so nothing is ignored and hidden input elements are validated.

4. Set your validation rules on the name of the hidden input element.

5. Use the .valid() method within your function on #2 above to trigger a validation test on the hidden input element whenever the selection is changed.

6. Use a conditional within the plugin's errorPlacement callback function to put the validation message in a location more relevant to the Bootstrap pulldown menu. You'll need a conditional in order to preserve the default error placement code for the other elements.

---

BTW: Your numerical id...

<li id="1">

...might be technically correct in HTML5, however, an id starting with a number could be a problem in other areas. More info: What are valid values for the id attribute in HTML?

这篇关于在引导下拉菜单中应用jquery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！