使用jquery validate在select2中输入有效答案后删除类(‘has-error’)

Question

我使用select2进行下拉和jquery验证。在输入有效输入后，error类应该被删除，并且它可以处理其他输入，比如文本，但select保留了这个类。我试过这样做：

$.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: {.....
});

下面是我的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>

下面是select2的初始化：

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

我手动尝试删除errorClass并将style="display: none“添加到error元素，但不起作用。请帮帮我。

Answer 1

我认为setTimeout应该在这里做这项工作。请更改您的验证插件设置，如下所示：

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

并额外添加以下代码：

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

如果你仍然有问题，请发送网址，我将为你测试它。