Not able to apply css | Required Field validation for Select2 multi select

Question

User976792605 posted

hi all

I am using select2 multi select in my MVC application. Its working absolutely fine. But the usual behavior of required attribute is not working for select2 inputs.

<select id="FamiliesSelect" class="col-xl-10 js-example-basic-multiple" asp-items="@(new SelectList(some items))" required multiple>
</select>

when the FamiliesSelect input is empty, it is not allowing form submit but does not applying css 'input-validation-error'.

Please help. Thanks

Answer 1

User1520731567 posted

Hi varun3101,

when the FamiliesSelect input is empty, it is not allowing form submit but does not applying css 'input-validation-error'.

I make a simple demo,you could refer to:

<style>
  
   .myErrorClass {
        color: red;
        font-size: 11px;
        /*    font-style: italic;*/
        display: block;
    }
</style>


<form id="frm">
    <h1>Sample form</h1>

    <br />
    <div>
        <label for="lstColors" class="bold block">Favorite Colors:</label>
        <select name="lstColors" id="lstColors" size="1" multiple="multiple" class="required">
            <option value="R">Red</option>
            <option value="W">White</option>
            <option value="B">Blue</option>
        </select>
    </div>
    <br />
    <br />
    <input type="submit" value="Submit" />
</form>

@section scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
    <script>


        $(document).ready(function () {

            //Transforms the listbox visually into a Select2.
            $("#lstColors").select2({
                placeholder: "Select a Color",
                width: "200px"
            });

            //Initialize the validation object which will be called on form submit.
            $("#frm").validate({
                onkeyup: false,
                errorClass: "myErrorClass",

                //put error message behind each form element
                errorPlacement: function (error, element) {
                    var elem = $(element);
                    error.insertAfter(element);
                }


            });


        });
    </script>
}

How my demo works:

More details,you could refer to this link:

http://jsfiddle.net/chadkuehn/D7K6U/

Best Regards.

Yuki Tao

Answer 2

User976792605 posted

Thanks Yuki for your reply. Actually i want to make border of select box red. As jquery required is working for other html elements. I want to have same behavior for select box as well.

Answer 3

User-2054057000 posted

Select2 is just a normal select control with multiple property. You can bind it with Model just like a normal select control and do the validations using Data Annotations.

A similar question is answers in the forum which might solve your problem to - 

Model Binding and SelectList

Answer 4

User1520731567 posted

Hi varun3101,

Thanks Yuki for your reply. Actually i want to make border of select box red. As jquery required is working for other html elements. I want to have same behavior for select box as well.

If you would like to make border of select box red,you could refer to the my demo I provided before.

You could add the code like below:

  var validobj = $("#frm").validate({
        onkeyup: false,
        errorClass: "myErrorClass",

      
        //When there is an error normally you just add the class to the element.
        // But in the case of select2s you must add it to a UL to make it visible.
        // The select element, which would otherwise get the class, is hidden from
        // view.
        highlight: function (element, errorClass, validClass) {
            var elem = $(element);
            if (elem.hasClass("select2-offscreen")) {
                $("#s2id_" + elem.attr("id") + " ul").addClass(errorClass);
            } else {
                elem.addClass(errorClass);
            }
        }


    });

css:

 ul.myErrorClass {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #cc0000 !important;

}

How it works:

Best Regards.

Yuki Tao