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/