Jquery驗證不需要字段工具提示消息問題

Question

我正在使用jquery驗證並使用引導工具提示顯示錯誤消息。這工作正常，但是當我在不需要的字段中插入不正確的值，然後刪除文本並將該字段留空時，輸入中的高亮效果消失，但工具提示仍然可見。

JS

$('#myform').validate({ // initialize the plugin 
    onkeyup: false, 
    rules: { 
    field1: { 
     required: true, 
     number: true 
    }, 
    field2: { 
     number: true 
    } 
    }, 
    errorPlacement: function (error, element) { 
    var lastError = $(element).data('lastError'), 
     newError = $(error).text(); 
    $(element).data('lastError', newError); 
    if (newError !== '' && newError !== lastError) { 
     $(element).tooltip({ 
     placement: "bottom", 
     trigger: "manual" 
     }).attr('title', newError).tooltip('fixTitle').tooltip('show'); 
    } 
    }, 
    success: function (label, element) { 
    $(element).tooltip('hide'); 
    } 
}); 

HTML

<form id="myform"> 
    <input type="text" name="field1" /> 
    <input type="text" name="field2" /> 
    <input type="submit" /> 
</form> 

爲了解決我的問題，我嘗試使用unhighlight方法，但只能在第一時間，則提示將不再顯示時再在同一字段中插入不正確的值

unhighlight: function(element, errorClass, validClass) { 
    $(element).removeClass(errorClass).addClass(validClass); 
    $(element).tooltip('hide'); 
} 

在第二個字段中輸入文本並將其刪除。 jsfiddle

我該如何解決我的問題？由於

Answer 1

可以考慮下鍋的工作，但聽blur事件，如果空清除工具提示，完美的作品：

$("input").blur(function() { 
    if (!this.value.trim().length) 
    $(this).tooltip("hide"); 
}); 

片段

$('#myform').validate({ // initialize the plugin 
 
    onkeyup: false, 
 
    rules: { 
 
    field1: { 
 
     required: true, 
 
     number: true 
 
    }, 
 
    field2: { 
 
     required: false, 
 
     number: true 
 
    } 
 
    }, 
 
    errorPlacement: function(error, element) { 
 
    var lastError = $(element).data('lastError'), 
 
     newError = $(error).text(); 
 
    $(element).data('lastError', newError); 
 
    if (newError !== '') { 
 
     $(element).tooltip({ 
 
     placement: "bottom", 
 
     trigger: "manual" 
 
     }).attr('title', newError).tooltip('fixTitle').tooltip('show'); 
 
    } 
 
    }, 
 
    success: function(label, element) { 
 
    $(element).tooltip('hide'); 
 
    } 
 
}); 
 
$("input").blur(function() { 
 
    if (!this.value.trim().length) 
 
    $(this).tooltip("hide"); 
 
});

#myform { 
 
    width: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<form id="myform"> 
 
    <input type="text" name="field1" /> 
 
    <input type="text" name="field2" /> 
 
    <input type="submit" /> 
 
</form>

JsFiddle：https://jsfiddle.net/reo1ck3e/