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


Related articles: