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

Question

我使用 select2 进行下拉菜单和 jquery 验证。输入有效输入后，应删除错误类，并且它可以与文本等其他输入一起使用，但 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);
    }           
});

如果您仍然遇到问题，请发送网址，我将为您测试。