将 validator.js 用于 Bootstrap 下拉菜单

Question

我无法找到一种方法来使用 validator.js 引导库 http://1000hz.github.io/bootstrap-validator/ 作为引导下拉菜单。它适用于所有其他字段，但不适用于下拉菜单。可能有办法做到这一点，但我不知道如何。这是我的下拉代码。

<div class="dropdown" >
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select a number   
  <span class="caret"></span></button>
  <ul class="dropdown-menu" >
    <li><a id="a_5" href="#">5</a></li>
    <li><a id="a_4" href="#">4</a></li>
    <li><a id="a_3" href="#">3</a></li>
    <li><a id="a_2" href="#">2</a></li>
    <li><a id="a_1" href="#">1</a></li>
  </ul>
</div>

Answer 1

文档中似乎没有显示示例，如果您使用的是 Html5，则可以将其更改为使用带有所需属性的 select 标记，如果这是一个选项，就在这里。

<form >
    <select required>
      <option value="">None</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
    </form>

Answer 2

假设在 <form> 中显示的代码在其中实例化了 Bootstrap 验证器。

<div class="dropdown" >
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select a number   
  <span class="caret"></span></button>
  <ul class="dropdown-menu" >
    <li><a id="a_5" href="#">5</a></li>
    <li><a id="a_4" href="#">4</a></li>
    <li><a id="a_3" href="#">3</a></li>
    <li><a id="a_2" href="#">2</a></li>
    <li><a id="a_1" href="#">1</a></li>
  </ul>
  <input type="hidden" id="dropdownSelected" class="form-control"></input>
</div>

<script>
$('.dropdown li').on('click', function(){
    $('#dropdownSelected').val($(this).text());
});
</script>

现在应该验证隐藏的输入。
;)