Bootstrap Validator for select fields
In order to make BootstrapValidator work together with other plugin, you should follow two rules below:
- Don't exclude the field if the plugin changes the field visibility
Some plugins hide your field and create new elements to change how the field looks like. By default, the hidden, invisible fields will not be validated. Therefore, you need to set
excluded: ':disabled'
See the excluded option for more information.
- Revalidate the field if the plugin changes its value dynamically:
Most plugins trigger an event after changing the field value. By using this kind of event handler, you need to ask BootstrapValidator to revalidate the field.
In your case, you have just to do the following:
- Add the
excluded
option. - Use
notEmpty
validator instead of theCallback
validator. - Instead of using
.submit
use.change
in order to revalidate the field when it's changed.
See code bellow:
$('#bootstrapSelectForm')
.find('[name="region"]')
.selectpicker()
.change(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region');
})
.end()
.find('[name="duration"]')
.selectpicker()
.change(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration');
})
.end()
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled', // <=== Add the excluded option
fields: {
region: {
validators: {
notEmpty: { // <=== Use notEmpty instead of Callback validator
message: 'Please select region'
}
}
}
duration: {
validators: {
notEmpty: { // <=== Use notEmpty instead of Callback validator
message: 'Please select region.'
}
}
}
}
}
});
See Bootstrap Select example for more information.
Matt
Updated on December 06, 2020Comments
-
Matt over 3 years
Trying to require that both drop down selection boxes have a chosen option before submit is enabled to be clicked. What is missing that is not allowing the plugin to check for validation?
FORM:
<form role="form" id="bootstrapSelectForm" class="form-horizontal"> <div class="row"> <div class="col-xs-6"> <br> <h5>Region</h5> <select class="form-control" name="region" id="region" > <option value="">Select a Region</option> <option value="US">US</option> <option value="UK">UK</option> <option value="Sales Team">XS (Sales Team)</option> <option value="Editorial Test">XT (Editorial Test)</option> </select> </div> <div class="col-xs-6"> <br> <h5>Duration</h5> <select class="form-control" name="duration" id="duration" > <option value="">Select a Duration</option> <option value="5">5 Minutes</option> <option value="10">10 Minutes</option> <option value="15">15 Minutes</option> <option value="20">20 Minutes</option> <option value="25">25 Minutes</option> <option value="30">30 Minutes</option> </select> </div> <div class="col-xs-6"> <button type="submit" class="btn btn-default" id="submit">Submit</button> </div> </div>
Bootstrap Validator:
$(document).ready(function() { $('#bootstrapSelectForm') .find('[name="region"]') .selectpicker() .submit(function(e) { $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region'); }) .end() .find('[name="duration"]') .selectpicker() .submit(function(e) { $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration'); }) .end() .bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { region: { validators: { callback: { message: 'Please select region', } } } }, duration: { validators: { message: 'Please select region.' } } } }); });