Validate Select2

by Jerry Jacob

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="http://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="lstColors1" class="bold block">Favorite Colors:</label>
    <input type="hidden" id="lstColors" class="required" />
  </div>
  <br />
  <br />
  <div>
    <label for="listStates" class="bold block">My State:</label>
    <input type="hidden" id="listStates" name="listStates" class="required" />
  </div>
  <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;
}
*/

a.myErrorClass,
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;
}

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

JavaScript

$(document).ready(function() {
  $("#listStates").select2({
    placeholder: "Select a State",
    width: "200px",

    //adding a delay
    query: function(query) {
      var data = {
        json: JSON.stringify({
          results: [{
            id: "",
            text: ""
          }, {
            id: "IA",
            text: "Iowa"
          }, {
            id: "CA",
            text: "California"
          }, {
            id: "FL",
            text: "Florida"
          }]
        }),
        delay: 1
      };
      $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: data,
        success: function(response) {
          query.callback(response);
        }
      });

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

    //adding a delay
    query: function(query) {
      var data = {
        json: JSON.stringify({
          results: [{
            id: "",
            text: ""
          }, {
            id: "b",
            text: "Blue"
          }, {
            id: "g",
            text: "Green"
          }, {
            id: "r",
            text: "Red"
          }]
        }),
        delay: 1
      };
      $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: data,
        success: function(response) {
          query.callback(response);
        }
      });

    }
  });

  //Initialize the validation object which will be called on form submit.
  var validobj = $("#frm").validate({



    ignore: [],
    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...