Solution to Unavailable bootstrapValidator bootstrap select Verification
- 2021-07-10 18:17:02
- OfStack
How to resolve the unavailability of bootStrapValidator bootStrap-select authentication requires only three steps:
Idea: Assign the selected value of the multi-selection drop-down box to a hidden input component, and then verify the input component (bootstrap-validator does not verify the components of hidden and disabled by default, but can be changed by excluded attribute). The specific steps are as follows:
1. Form Validation Initialization (js)
$('#myModalForm').bootstrapValidator({
message: 'This value is not valid',
excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] // Setting hidden components verifiable
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
roleid: {
message: ' Invalid role ',
validators: {
notEmpty: {
message: ' Role cannot be blank '
}
}
}
}
} )
2. bootStrap-select component configuration (jsp page)
<input type="hidden" class="form-control" id="roleid" name="roleid">
<select class="selectpicker form-control" multiple data-width="60%" id="roleidForSelect" title="--- Please select ---"></select>
3. After selecting the multi-selection drop-down box, assign a value to the corresponding input
$('#roleidForSelect').on('hidden.bs.select', function (e) { // This method registers to the $(function(){}) In a function
var tmpSelected = $('#roleidForSelect').val();
if(tmpSelected != null){
$('#roleid').val(tmpSelected);
}else {
$('#roleid').val("");
}
// Due to input For hidden Validation appears 1 Some bug Where you manually validate the hidden input Component
$('#myModalForm').data('bootstrapValidator').updateStatus('roleid', 'NOT_VALIDATED').validateField('roleid');
});
If you want to study in depth, you can click here to study, and then attach three wonderful topics for you:
Bootstrap Learning Tutorial
Bootstrap Practical Course
Bootstrap Table Using Tutorial
Tutorial on using Bootstrap plug-ins