title: select2 and jquery validation not working properly
body: <p>Trying to use validation on select2 with a few issues :</p>
  
  <ul>
  <li><p>the error message will show, but it will not remove when a valid entry is entered.</p></li>
  <li><p>I am loading an initial value which works fine... the validator, however, does not recognize the value and tells me it is invalid... I have to manually type in the same value and then it validates, but still does not remove the error class/message showing it is valid.</p></li>
  </ul>
  
  <p><strong>form :</strong></p>
  
  <pre><code>&lt;div class="col-md-12 margin-bottom-30 form-group"&gt;
      &lt;div class="input-modal-group"&gt;
          &lt;label for="vedit-filter" class="f-14"&gt;&lt;b&gt;filter :&lt;/b&gt;&lt;/label&gt;
          &lt;input id="vedit-filter" type="text" name="settings[filter]" class="form-control select2"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;input id="filter_default" type="hidden" name="settings[original]" value="&lt;?php echo escapeStr($result[filter]); ?&gt;"/&gt;
  </code></pre>
  
  <p><strong>js :</strong></p>
  
  <pre><code>// get the default filter           
  var default_filter = $("#filter_default").val();
  
  $("#vedit-filter").select2({
      //placeholder: "Select or enter...",
      allowClear: true,
      multiple: false,
      ajax: {
          dataType: 'json',
          url: '/process/get_filter_list.php',
          results: function (data) {
              return {results: data};
          }
      },
      createSearchChoice:function(term, data) {
          if ($(data).filter(function() {
              return this.text.localeCompare(term)===0; }).length===0) {
                  return {id:term, text:term};
              }
          },
      initSelection : function (element, callback) {
          var obj= {id:default_filter, text:default_filter};
          callback(obj);
      }
  });
  
  $('#filters-edit').validate({
      errorElement: 'span', //default input error message container
      errorClass: 'help-block', // default input error message class
      focusInvalid: false, // do not focus the last invalid input
      rules: {
          'settings[filter]': {
              required: true
          }
      },
  
      messages: {
          'settings[filter]': {
              required: "Filter is required."
          }
      },
  
      highlight: function (element) { // hightlight error inputs
          $(element)
              .closest('.form-group').addClass('has-error');
      },
  
      unhighlight: function (element) { // un-hightlight error inputs
          $(element)
              .closest('.form-group').removeClass('has-error'); 
      },
  
      errorPlacement: function (error, element) {
          error.insertAfter(element.closest('.input-modal-group'));
      },
  
      // ajax submit
      submitHandler: function (form) {
  
      ...submit stuff below
  </code></pre>