使用jQuery Validate在select2中输入有效答案后，删除类（'has-error'）

Question

I am using select2 for dropdown and jquery validate. After entering valid input, error class should be removed, and it is working with other inputs like texts, but select is retaining this class. I tried doing so:

$.validator.setDefaults({
    errorClass: 'help-block',
    errorElement: 'span',
    focusInvalid: true,
    highlight: function(element, errorClass, validClass)
    {

      var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');
      switch(fieldtype)
      {
        case "dateField":
          $(element).closest('.form-group').addClass('has-error');
          // $(element).select();
          break;
        default:
          $(element).closest('.form-group').addClass('has-error');
          break;
      }

    },
    unhighlight: function(element, errorClass, validClass)
    {
      if($(element).hasClass('select2-offscreen'))
      {
        $(element).closest('.form-group').removeClass('has-error');
        $(element).next('span').css({display: "block"});
      }
      else
      {
        $(element).closest('.form-group').removeClass('has-error');
      }   
    },

    errorPlacement: function (error, element) {
            var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal');

            switch (fieldtype) {
                case "dateField":
                    if (window && window.console) {
                        console.log("Date type field type");
                    }
                    error.appendTo(element.parent().parent());
                    break;
                default:
                    if (window && window.console) {
                        console.log("Regular field type");
                    }
                    error.appendTo(element.parent());
                    break;
            }
        }
  });
  $('#employee-form').validate(
  {
    rules: {
            firstname: {
                alpha: true,
                required: true
            },
           },
messages: {.....
});

Here's my html:

<div class="form-group">
  <label class="col-sm-4 control-label" for="designation">Designation <span class="input-required">*</span></label>
  <div class="col-sm-7">
    <select name="designation_id" class="form-control" id="designations">
     <option></option>
     <option value="<?php echo $designation->id; ?>"><?php echo $designation->title; ?></option>
     </select>
  </div>
</div>

Here's select2 initialization:

$('#designations').select2({
    sortResults: function (results) {
        return results.sort();
    },
    placeholder: "Select designation",
    allowClear: true
});

I manually tried to remove errorClass and add style="display: none" to error element, but it doesn't work. Help me please.

Answer 1

I think the setTimeout should do the job here. Please change your validate plugin settings as given here:

unhighlight: function(element) {
    if (jQuery(element).is('#designations')) {
        setTimeout(function(){
            $(element).closest('.form-group').removeClass('has-error');
        },50);
    }
}

and add following code additionally:

jQuery("#designations").on('change', function (evt) {
    $thisVal = jQuery("#designations").val();
    if($thisVal != '') {
        setTimeout(function(){
            jQuery("#test-form").validate().element('#designations');
        },100);
    }           
});

If you still have issues, kindly send the url and i will test it for you.