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

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

<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");
});

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

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

<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");
});

• javascript
• jquery
• html
• twitter-bootstrap

2 Answers 2

You are handling the hide.bs.select event on the select class that is not on your select input. Try with .selectpicker instead :

<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

You have to use ".selectpicker".

Maybe it will helps you to solve yout issue:

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