FormValidation.io with bootstrap select - bootstrap-select

Question

I'm using Boost strap 4 and the bootstrap select jQuery plugin.
Im trying to integrate FormValidation.io with my forms. I have got everything working with normal input fields but cant figure out how to integrate it with the select field.
I would like it to be a required field and display the tick icon once a selection has been made.
my FormValidation.io code :
document.addEventListener('DOMContentLoaded', function(e) {
const mydropzone = document.getElementById('mydropzone');
const RoleIdField = jQuery(mydropzone.querySelector('[name="roleId"]'));
const fv = FormValidation.formValidation(mydropzone, {
fields: {
first_name: {
validators: {
notEmpty: {
message: 'First Name is required'
},
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'First Name can only consist of alphabetical characters'
}
}
},
last_name: {
validators: {
notEmpty: {
message: 'Last Name is required'
},
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'First Name can only consist of alphabetical characters'
}
}
},
roleId: {
validators: {
notEmpty: {
message: 'Please select a Role'
},
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
}
}
);
});
$('#roleId').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// Revalidate the color field when an option is chosen
fv.revalidateField('roelId');
});
My form ID is 'mydropzone' and my select name and id are 'roleId'
Any help appreciated.

Answer 1

Thanks to the developers who answered my email, anyone else that needs to know how this is done:
add this to your css file :
.bootstrap-select i.fv-plugins-icon {
right: -38px !important;
then configure your js like this :
<script>
document.addEventListener('DOMContentLoaded', function(e) {
$('#gender').selectpicker();
const demoForm = document.getElementById('demoForm');
FormValidation.formValidation(demoForm, {
fields: {
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
}
});
});
</script>