twitter-bootstrap 引导验证器与引导选择不工作

bootstrap validator with bootstrap select not working

提问by MVG1984

I have a form with few input fields and select menus. I'm using bootstrap select plugin for select menus. LinkSo I just completed all things and applied bootstrap validation using this plugin. Linkand it's working fine except select menus.

我有一个输入字段和选择菜单很少的表单。我正在使用引导程序选择插件来选择菜单。Link所以我刚刚完成了所有事情并使用这个插件应用了引导程序验证。链接，它工作正常，除了选择菜单。

When I click the select menu and click out side ( without selecting menu items ) It didn't do anything. Normally it should change border color and give error message like this. "Please fill out this field." But when I click submit, it working fine. After that I removed bootstrap selectpicker plugin. Then it worked fine. I'm thinking that there are conflicts with both two plugins. Please see example images.

当我单击选择菜单并单击外侧（不选择菜单项）时，它什么也没做。通常它应该改变边框颜色并给出这样的错误信息。“请填写此字段。” 但是当我点击提交时，它工作正常。之后我删除了引导选择器插件。然后它工作得很好。我认为这两个插件都存在冲突。请参阅示例图像。

Click select menu and outside click(not working)

单击选择菜单和外部单击（不起作用）

Click form submit and working fine.

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

And I tried with this code but no luck. I need to show an error message when someone click select menu and if he doesn't choose anything and click outside like input fields. What is the best solution for this?

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

Here is an example jsbin

这是一个示例 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");
});

回答by Béranger

You are handling the hide.bs.selectevent on the selectclass that is not on your select input. Try with .selectpickerinstead :

您正在处理不在选择输入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");
});

Here is the updated jsbin

这是更新的jsbin

回答by MVG1984

You have to use ".selectpicker".

您必须使用“.selectpicker”。

Maybe it will helps you to solve yout issue:

也许它会帮助你解决你的问题：

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

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