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

  • 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

    Friday, March 1, 2019 7:41 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 4, 2019 2:12 AM

All replies

  • 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

    Friday, March 1, 2019 9:59 AM
  • 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.

    Friday, March 1, 2019 12:18 PM
  • 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

    Friday, March 1, 2019 3:45 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 4, 2019 2:12 AM