Cannot validate bootstrap-select

[jiterziev]

Thank you for the great plugin! Now I'm trying to validate without success one drop down with bootstrap-select (https://silviomoreto.github.io/bootstrap-select/). Any ideas?

Thank you in advance!

[victorjonsson]

The actual select element becomes hidden by bootstrap-select. Have you tried to turn on validateHiddenInputs?

<form>
  ...
  <select class="selectpicker show-menu-arrow" data-validation="required">
    <option value="">-- Select something --</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  ...
</form>
<script>
  $.validate({
    validateHiddenInputs: true
  });
</script>

[jiterziev]

Thank you! It works! But.. :( in my case this select is required only when radio button is selected and now when is hidden i cannot submit the form at all.

Thank you in advance!

You can see the picture for details.

[victorjonsson]

I need to see your entire code.

[jiterziev]

This is all the code from this section:

...

[victorjonsson]

I found something in the code that might be of help. It's undocumented due to the fact that this will change when #153 is implemented.

However, you need to use data-validation-if-checked in combination with data-validation-if-checked-value

<form>
  ...
  <input type="radio" name="limited" value="yes"> Yes
  <input type="radio" name="limited" value="no"> No
  ...
  <select class="selectpicker show-menu-arrow" 
         data-validation="required"
         data-validation-if-checked="limited"
         data-validation-if-checked-value="yes">
    <option value="">-- Select something --</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  ...
</form>

[jiterziev]

Thank you! So no hope in this time for validation trough radio buttons only check boxes for now?

[victorjonsson]

Have you tried the code example above? It should work with radio buttons...

[jiterziev]

Beautiful! It works! Thank you!

[jiterziev]

It work flawlessly, but now i have a problem. The condition works only if the first radio button is clicked no matter of the value. But i need this to work with different values. Any ideas?

<form>
  ...
  <input type="radio" name="limited" value="yes"> Yes
  <input type="radio" name="limited" value="no"> No
  ...
  <select class="selectpicker show-menu-arrow" 
         data-validation="required"
         data-validation-if-checked="limited"
         data-validation-if-checked-value="yes">
    <option value="">-- Select something --</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  ...
</form>

[victorjonsson]

That will require some custom code, until #153 is implemented

[asmaazoghbi]

@victorjonsson it didn't work for me, the bootstrap-select is not working with validate

[victorjonsson]

@asmaazoghbi Could you please provide me with your form markup?

[victorjonsson]

I'm not able to reproduce this bug with the latest published version of the plugin (that is about 10 months old). You must set validateHiddenInputs to true, as mentioned above.

http://jsbin.com/kupevoreha/1/edit?html,js,output

To improve the user experience you might use validateOnEvent and add data-validation-event="change" to the select element.

<select
    data-validation="length"
    data-validation-length="min2"
    data-validation-error-msg="You must pick at least two options"
    data-validation-event="change"
    class="selectpicker" 
    multiple 
    style="display: none;">          
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
  <option>option4</option>            
</select>
...
<script>
  $.validate({
    validateHiddenInputs: true,
    validateOnEvent: true
  })
</script>

[saptisunil]

Heyy ! Can anyone help me with this ! Here is my output ! i want this message "this is required" below the field. Someone please help me with this ?

[kishan-chauhan]

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>

Use this css and js for selectpicker, for me it is worked after this used.