bootstrap-validator
bootstrap-validator copied to clipboard
Custom validation doen't add has-error class on Select2
I have create a custom validation to check if the user have select one or more items on select2 field with multiselect option, if user didn't have select nothing the validation is not pass. I have 2 problems:
- custom function is call only when I call validator('validate') but not when select2 is unfocus;
- when call validator('validate') custom function is call but the class "has-error" is not added to form group so the form is submit.
My JS code:
$('#saveinvoice').validator({
custom: {
'customers': function($el) {
if ($el.select2('data').length==0) {
return "Select one or more customers!";
}
}
}
});
function submitInvoiceData(){
if ($('#saveinvoice').validator('validate').has('.has-error').length == 0) {
...
document.getElementById('saveinvoice').submit();
};
}
My HTML code:
<div class="col-md-6">
<div class="form-group">
<label for="Contacts">Contacts</label>
<select class="form-control select2" id="Contacts" name="Contacts" multiple="multiple" data-placeholder="" style="width: 100%;" value="2" data-customers="true" required>
<option value="1">AAAA</option>
<option value="2">BBBB</option>
<option value="3">CCCC</option>
</select>
</div>
</div>
a workaround:
$(document).on("invalid.bs.validator","form",function(e){
$(".select2-hidden-accessible").trigger("change");
});