Question

我有一个包含少量输入字段和选择菜单的表单。我正在为选择菜单使用bootstrap select插件。 Link 所以我刚刚完成所有事情并使用此插件应用了bootstrap验证。 Link除了选择菜单外，它的工作正常。

当我点击选择菜单并单击侧面（不选择菜单项）时，它没有做任何事情。通常它应该更改边框颜色并给出这样的错误消息。＆＃34;请填写此字段。＆＃34;但是当我点击提交时，它运行正常。之后我删除了bootstrap selectpicker插件。然后它工作正常。我认为这两个插件都存在冲突。请参阅示例图片。

点击选择菜单，然后点击外部（不工作）

点击表单提交并正常工作。

我尝试使用此代码但没有运气。当有人点击选择菜单并且他没有选择任何内容并且像输入字段一样点击外部时，我需要显示错误消息。什么是最好的解决方案？

这是一个例子 jsbin

<form data-toggle="validator">
    <div class="form-group">
      <label for="select" class="control-label">Title</label>
         <div class="form-input">
           <select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
             <option value=""></option>
             <option value="1">Mr</option>
             <option value="2">Mrs</option>
             <option value="3">Ms</option>
             <option value="4">Miss</option>
             <option value="5">Dr</option>
           </select>
        <div class="help-block with-errors"></div>
      </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>

$('.select').on( 'hide.bs.select', function ( ) {
    $(this).trigger("focusout");
});

Answer 1

您正在hide.bs.select上处理select类上不属于您选择输入的事件。请尝试使用.selectpicker：

<form data-toggle="validator">
    <div class="form-group">
      <label for="select" class="control-label">Title</label>
         <div class="form-input">
           <select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
             <option value=""></option>
             <option value="1">Mr</option>
             <option value="2">Mrs</option>
             <option value="3">Ms</option>
             <option value="4">Miss</option>
             <option value="5">Dr</option>
           </select>
        <div class="help-block with-errors"></div>
      </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>

$('.selectpicker').on( 'hide.bs.select', function ( ) {
    $(this).trigger("focusout");
});

这是the updated jsbin

Answer 2

你必须使用＆＃34; .selectpicker＆＃34;。

也许它可以帮助您解决问题：

http://formvalidation.io/examples/bootstrap-select/

带引导程序的bootstrap验证器选择不起作用

2 个答案: