select2 with jqueryvalidation

by Jerry Jacob

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form id="form-validation" method="post">
  <h1>Your State Form</h1>
  <br />
  <div>
    <label for="listStates" class="bold block">My State:</label>
    <input type="hidden" id="listStates" name="listStates" class="required" />
  </div>
  <br />
  <br />
  <input type="submit" value="Submit" />
</form>

JavaScript

//Transforms the listbox visually into a Select2.
$("#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);
      }
    });

  }
});

$("#form-validation").validate({
  rules: {
    listStates: {
      required: true,
    },

  },
  messages: {
    listStates: {
      required: "Please select your state.",
    },

  }

});