title: jQuery validation select2
body: <p>I validate my form with jQuery validation plugin. I change style dropdown menu with jQuery select2 plugin. if validate callback error my input show/add class error box(red border) else show/add class success box(green border). This worked in normal input but wont work in select2. when I choose any value for select box error box(red border) not hide/switch to success box. select2 worked after click submit button.</p>
  
  <p>JS:</p>
  
  <pre><code>$('form').validate({
      rules: {
          firstname: {
              minlength: 3,
              maxlength: 15,
              required: true
          },
          lastname: {
              minlength: 3,
              maxlength: 15,
              required: true
          }
      },
      highlight: function (element, errorClass, validClass) {
          if (element.type === "radio") {
              this.findByName(element.name).addClass(errorClass).removeClass(validClass);
          } else {
              $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
              $(element).closest('.form-group').find('i.fa').remove();
              $(element).closest('.form-group').append('&lt;i class="fa icon-plane icon-2x form-control-feedback"&gt;&lt;/i&gt;')
          }
      },
      unhighlight: function (element, errorClass, validClass) {
          if (element.type === "radio") {
              this.findByName(element.name).removeClass(errorClass).addClass(validClass);
          } else {
              $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
              $(element).closest('.form-group').find('i.fa').remove();
              $(element).closest('.form-group').append('&lt;i class="fa icon-plane icon-2x  form-control-feedback"&gt;&lt;/i&gt;');
          }
      },
      errorElement: 'span',
      errorClass: 'help-block',
      errorPlacement: function (error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      }
  });
  $("#lstColors").select2({
      placeholder: "Select a Color",
      width: "200px"
  });
  </code></pre>
  
  <p>how do fix this problem ?!</p>
  
  <p>DEMO : <a href="http://jsfiddle.net/hTPY7/1413/" rel="nofollow">http://jsfiddle.net/hTPY7/1413/</a></p>