将 validator.js 用于 Bootstrap 下拉菜单

Posted 2023-05-08

【中文标题】将 validator.js 用于 Bootstrap 下拉菜单

【英文标题】：Using validator.js for Bootstrap dropdowns

【发布时间】：2017-08-16 17:18:01

【问题描述】：

我无法找到一种方法来使用 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>

【参考方案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>

【讨论】：

我想过这个，但 Bootstrap 下拉菜单看起来好多了，我正在尝试为该组件进行验证。

此外，如果我将它与 Bootstrap 组件一起使用，则此验证似乎不起作用。

【参考方案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>

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

【讨论】：

哇，这是一个了不起的开箱即用的想法，它应该可以工作，但它似乎不起作用。我在输入标签上添加了一个 required 应该是正确的？

嗯。控制台没有错误？你能给我一个实时链接吗？

好吧，我无能为力...你能用你的代码创建一个CodePen 来重现这个问题吗？