I'm currently working on a form where i've implemented the Selectize.js and Bootstrap 3 Validator plugin. Now I've a problem with the validation of the selectize input fields on submitting the form.
When I submit the form without selecting any option for the required fields, the validation will work and says that the field must be filled. But when I select a option for all the required fields after the validation and submit the form again, it will always say that the selectize fields are not validated/empty.
// a required selectize field
<div class="form-group has-error has-danger" data-field-id="42">
<label class="control-label col-sm-2" for="field-42-selectized">
Some field * </label>
<div class="col-sm-10">
<select class="field-input selectize selectized" data-field="42" name="field[42]" id="field-42" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control field-input selectize single plugin-remove_button">
<div class="selectize-input items required invalid not-full has-options">
<input type="text" autocomplete="off" tabindex="" id="field-42-selectized" placeholder="-" required="" style="width: 8.51563px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown single field-input selectize plugin-remove_button" style="display: none; width: 726.656px; top: 38px; left: 0px; visibility: visible;">
<div class="selectize-dropdown-content">
<div class="option" data-selectable="" data-value="1">
data1
</div>
<div class="option" data-selectable="" data-value="2">
dat2
</div>
</div>
</div>
</div>
</div>
</div>
I've done some debugging and found the place where it goes wrong namely here:
<input type="text" autocomplete="off" tabindex="" id="field-42-selectized" placeholder="-" required="" style="width: 8.51563px; opacity: 1; position: relative; left: 0px;">
