jquery 유효성 검사를 사용하여 select2에 유효한 대답을 입력 한 후 클래스 ('has-error')를 제거하십시오.

Question

드롭 다운 및 jquery 유효성 검사에 select2를 사용하고 있습니다. 유효한 입력을 입력 한 후에는 오류 클래스를 제거하고 텍스트와 같은 다른 입력과 함께 작업하지만 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입니다 : 내가 수동으로 errorClass를 제거하고 스타일 = 추가하려고

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

: 여기

<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> 

하는 것은 선택 2 초기화 없다 "표시 : 없음" 오류 요소는 있지만 작동하지 않습니다. 도와주세요, 제발.

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); 
    }   
}); 

가, 친절 URL을 보내고 난 당신을 위해 그것을 테스트합니다.