Jul 11, 2020
.
Admin
-0.jpg)
Hi guys,
In this blog, I will create DropDown With Validation using select2. We will show you With Validation using select2. you can easliy make select2 DropDown With Validation example in bootstrap 4.We will make select2 DropDown With Validation example using bootstrap 4.
I will give you full example of Select2 DropDown With Validation Example.
Example
<html>
<head>
<title>Select2 DropDown With Validation Example Bootstrap 4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2-bootstrap.min.css" />
<body>
<style type="text/css">
#select2Form .form-control-feedback {
z-index: 100;
}
.help-block{
color: red;
}
body{
background-color: #c0ed4d;
}
</style>
<div class="continer">
<div class="row mt-5 pt-5">
<div class="col-md-5 text-center offset-md-3 mt-5 pt-5">
<form id="select2Form" method="post" class="form-horizontal">
<label><h3>Favorite color</h3></label>
<select name="colors" class="form-control select2-select" multiple data-placeholder="Choose 2-4 colors">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
<div class="form-group mt-3">
<button type="submit" class="btn btn-success">Validate</button>
</div>
</form>
</div>
</div>
</div>
</body>
<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>
$(document).ready(function() {
$('#select2Form')
.find('[name="colors"]')
.select2()
// Revalidate the color when it is changed
.change(function(e) {
$('#select2Form').bootstrapValidator('revalidateField', 'colors');
})
.end()
.find('[name="colors-tags"]')
.select2({
// Specify tags
tags: ['Black', 'Blue', 'Green', 'Orange', 'Red', 'Yellow', 'White']
})
// Revalidate the color when it is changed
.change(function(e) {
$('#select2Form').bootstrapValidator('revalidateField', 'colors-tags');
})
.end()
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
colors: {
validators: {
callback: {
message: 'Please choose 2-4 color you like most',
callback: function(value, validator) {
// Get the selected options
var options = validator.getFieldElements('colors').val();
return (options != null && options.length >= 2 && options.length <= 4);
}
}
}
},
'colors-tags': {
validators: {
callback: {
message: 'Please choose 2-4 color you like most',
callback: function(value, validator) {
// Get the selected options
var options = validator.getFieldElements('colors-tags').val(),
options2 = options.split(',');
return (options2 !== null && options2.length >= 2 && options2.length <= 4);
}
}
}
}
}
});
});
</script>
</html>
It will help you...
#Jquery
#Bootstrap
#JavaScript
#Bootstrap 4
#Html
#Css
