Bootstrap 4 Select DropDown With Validation Example
Printed –
| Up to date – July 9, 2021 05:50 am
75 Views
At the moment, i we are going to present you bootstrap Four choose dropDown with validation instance. This text gives you easy instance of bootstrap Four choose dropDown with validation instance. you’ll be taught bootstrap Four choose dropDown with validation instance. So let’s comply with few step to create instance of bootstrap Four choose dropDown with validation instance.
Instance
<html>
<head>
<title>Bootstrap Four Choose DropDown With Validation Instance - codeplaners</title>
<hyperlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" />
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2-bootstrap.min.css" />
<physique>
<div class="continer">
<div class="row mt-5 pt-5">
<div class="col-md-5 text-center offset-md-Three mt-5 pt-5">
<kind id="select2Form" technique="publish" class="form-horizontal">
<label><h3>Select shade</h3></label>
<choose identify="colours" class="form-control select2-select" a number of data-placeholder="Select 2-Four colours">
<possibility worth="black">Black</possibility>
<possibility worth="blue">Blue</possibility>
<possibility worth="inexperienced">Inexperienced</possibility>
<possibility worth="orange">Orange</possibility>
<possibility worth="crimson">Pink</possibility>
<possibility worth="yellow">Yellow</possibility>
<possibility worth="white">White</possibility>
</choose>
<div class="form-group mt-3">
<button sort="submit" class="btn btn-success">Submit</button>
</div>
</kind>
</div>
</div>
</div>
</physique>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<script>
$(doc).prepared(operate() {
$('#select2Form')
.discover('[name="colors"]')
.select2()
// Revalidate the colour when it's modified
.change(operate(e) {
$('#select2Form').bootstrapValidator('revalidateField', 'colours');
})
.finish()
.discover('[name="colors-tags"]')
.select2({
// Specify tags
tags: ['Black', 'Blue', 'Green', 'Orange', 'Red', 'Yellow', 'White']
})
// Revalidate the colour when it's modified
.change(operate(e) {
$('#select2Form').bootstrapValidator('revalidateField', 'colors-tags');
})
.finish()
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
legitimate: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
colours: {
validators: {
callback: {
message: 'Please select 2-Four shade you want most',
callback: operate(worth, validator) {
// Get the chosen choices
var choices = validator.getFieldElements('colours').val();
return (choices != null && choices.size >= 2 && choices.size <= 4);
}
}
}
},
'colors-tags': {
validators: {
callback: {
message: 'Please select 2-Four shade you want most',
callback: operate(worth, validator) {
// Get the chosen choices
var choices = validator.getFieldElements('colors-tags').val(),
options2 = choices.break up(',');
return (options2 !== null && options2.size >= 2 && options2.size <= 4);
}
}
}
}
}
});
});
</script>
</html>
Komentar
Posting Komentar