Remove-Klasse ('has-Fehler'), nachdem gültige Antwort in select2 mit Jquery Validate

Question

Eingabe Ich verwende select2 für Drop-Down-und jquery Validieren. Nachdem eine gültige Eingabe eingegeben wurde, sollte die Fehlerklasse entfernt werden, und sie arbeitet mit anderen Eingaben wie Texten, aber select behält diese Klasse bei. Ich habe versucht, so zu tun:

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

Hier ist mein 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> 

Hier select2 Initialisierung:

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

Ich habe versucht, manuell Errorclass zu entfernen und style = add "display: none" zu Fehler Element, aber es funktioniert nicht. Hilf mir bitte.

Answer 1

Ich denke, die setTimeout hier die Arbeit machen sollte. Bitte ändern Sie Ihre Validate Plugin-Einstellungen gegeben, wie hier:

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

und fügen Sie zusätzlich folgenden Code:

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

Wenn Sie noch Fragen haben, bitten wir Sie die URL senden, und ich werde es testen für Sie.