CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user6037606
user6037606

Reputation:

bootstrap validator with bootstrap select not working

I have a form with few input fields and select menus. I'm using bootstrap select plugin for select menus. Link So I just completed 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) enter image description here

Click form submit and working fine. enter image description here

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

Upvotes: 0

Views: 21944

Answers (2)

MVG1984
MVG1984

Reputation: 645

You have to use ".selectpicker".

Maybe it will helps you to solve yout issue:

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

Upvotes: 0

B&#233;ranger
B&#233;ranger

Reputation: 673

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

Upvotes: 3

Related Questions