How to use 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(valuevalidator) {

                                // 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(valuevalidator) {

                                // 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

Related Topics