Validate Select2

by 2Yootz

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form id="frm">
     <h1>Sample form</h1>

    <div>
        <label for="txtName" class="bold block">Name:</label>
        <input type="text" name="txtName" id="txtName" class="required" />
    </div>
    <br />
    <div>
        <label for="txtBio" class="bold block">Bio:</label>
        <textarea cols="25" rows="4" name="txtBio" id="txtBio" class="required"></textarea>
    </div>
    <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>

CSS

.bold {
    font-weight:bold;
}
.block {
    display:block;
}
input[type=text] {
    width:300px;
}
body {
    background-color: #fff;
    font-size: .80em;
    font-family:"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}
/*
ul.myErrorClass, input.myErrorClass, textarea.myErrorClass, select.myErrorClass {
    border: 1px solid #cc0000 !important;
    background: #f3d8d8 url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png) 50% 50% repeat !important;
}
*/
 ul.myErrorClass, input.myErrorClass, textarea.myErrorClass, select.myErrorClass {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #cc0000 !important;
    background-color: #f3d8d8 !important;
    background-image: url(http://goo.gl/GXVcmC) !important;
    background-position: 50% 50% !important;
    background-repeat: repeat !important;
}
ul.myErrorClass input {
    color: #666 !important;
}
label.myErrorClass {
    color: red;
    font-size: 11px;
    /*    font-style: italic;*/
    display: block;
}

JavaScript

$(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.
    var validobj = $("#frm").validate({
        onkeyup: false,
        errorClass: "myErrorClass",

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

        //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);
            }
        },

        //When removing make the same adjustments as when adding
        unhighlight: function (element, errorClass, validClass) {
            var elem = $(element);
            if (elem.hasClass("select2-offscreen")) {
                $("#s2id_" + elem.attr("id") + " ul").removeClass(errorClass);
            } else {
                elem.removeClass(errorClass);
            }
        }
    });

    //If the change event fires we want to see if the form validates.
    //But we don't want to check before the form has been submitted by the user
    //initially.
    $(document).on("change", ".select2-offscreen", function () {
        if (!$.isEmptyObject(validobj.submitted)) {
            validobj.form();
        }
    });

    //A select2 visually resembles a textbox and a dropdown.  A textbox when
    //unselected (or searching) and a dropdown...