clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

Select2 DropDown With Validation using Bootstrap 4

  Hariom Prajapati
  22 Jun 2022
  HTML
Imperial Advance Hero Image

Select2 DropDown With Validation using Bootstrap 4

In this tutorial we will learn how to use select2 dropdown with validation using bootstrap 4.

Here we will take a example  in which we use select2 dropdown with validation using bootstrap 4.

Let’s follow below step to use select2 dropdown using bootstrap.

<html>

<head>
    <title>How to use Select2 DropDown With Validation using 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>your Favorite</h3>
                    </label>
                    <select name="colors" class="form-control select2-select" multiple
                        data-placeholder="Choose 2-4 colors">
                        <option value="black">HTML</option>
                        <option value="blue">CSS</option>
                        <option value="green">JavaScript</option>
                        <option value="orange">PHP</option>
                        <option value="red">MySql</option>
                        <option value="yellow">bootstrap</option>
                        <option value="white">Jquery</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>

 

Output

Select 2 dropdown