我正在尝试使用jQuery验证插件（bassistance）在组件验证失败时显示错误消息作为工具提示。但是，工具提示（也是bassistance的）却无法显示，因此我想知道如何使这个功能正常工作。目前我的代码如下：
$("#loginForm").validate({
errorPlacement: function(error, element) {
$(element).tooltip({
content: 'the error message goes here'
});
}
});
此外，我想知道如何获取实际本地化的错误信息以进行显示。我不想像上面片段中那样将其硬编码到工具提示中。
非常感谢您的帮助！;)
在没有提示插件的情况下，一种实现方法是使用一些 CSS 代码和想象力：
$("#frmArticle").validate({
submitHandler: function(form) {
form.submit();
},
onfocusout: function(element) {
//To remove the 'checked' class on the error wrapper
var $errorContainer = $(element).siblings(".Ntooltip").find("label");
$errorContainer.removeClass("checked");
if ( !this.checkable(element)) {
this.element(element);
}
},
rules: {
name: {
required: true
}
},
errorPlacement: function(error, element) {
var container = $('<div />');
container.addClass('Ntooltip'); // add a class to the wrapper
error.insertAfter(element);
error.wrap(container);
$("<div class='errorImage'></div>").insertAfter(error);
},
success: function(element) {
$(element).addClass("checked");
}
});
我不仅创建了一个错误标签，还为错误设计了以下HTML代码：
<div class="Ntooltip">
<label for="nombre" generated="true" class="error">Requerido</label>
<div class="errorImage"></div>
</div>
使用 CSS 代码，我们将隐藏此标签对用户不可见。但错误图像始终可见（当元素创建时，当然）。当用户悬停在上面时，标签将显示：
div.Ntooltip {
position: relative !important; /* es la posición normal */
display: inline-block;
top: -0.2em;
left: 0.2em;
}
div.Ntooltip:hover {
z-index:1005; /* va a estar por encima de todo */
}
div.Ntooltip label {
display: none !important; /* el elemento va a estar oculto */
vertical-align: middle;
}
div.Ntooltip:hover label.error:not(.checked) {
display: inline-block !important; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
left:2em; /* donde va a estar */
width:auto; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #ff6611; /* el color de fondo por defecto */
border: 3px coral solid;
border-radius: 0.5em;
color: white;
opacity: 0.85;
}
label.error + div.errorImage {
background:url("../img/error.png") no-repeat 0px 0px;
display:inline-block !important;
width:22px;
height:22px;
vertical-align: middle;
}
label.checked + div.errorImage {
background:url("../img/valid.png") no-repeat 0px 0px;
display:inline-block !important;
width:22px;
height:22px;
vertical-align: middle;
}
如果要使工具提示在其父元素范围之外可见，您必须更改父元素的溢出属性为 visible。如果您正在使用 jQueryUI，请查看用于进行这些更改的 CSS。
overflow: visible;
以下是它的样子:
编辑: 创建了一个JSFiddle进行演示，更新了onfocusout方法。
为了让其他人也能找到这个解决方案：
我想通过一个更强大的插件来实现相同的功能，我找到了 qtip2。它与 jQuery Validate 很好地集成在一起，你可以在这里看到：这里
我可以使用Bootstrap的工具提示机制来实现这一点。只需加载Bootstrap JS / CSS，然后初始化验证并像这样传递showErrors函数：
$("form").validate({
showErrors: function(errorMap, errorList) {
// Clean up any tooltips for valid elements
$.each(this.validElements(), function (index, element) {
var $element = $(element);
$element.data("title", "") // Clear the title - there is no error associated anymore
.removeClass("error")
.tooltip("destroy");
});
// Create new tooltips for invalid elements
$.each(errorList, function (index, error) {
var $element = $(error.element);
$element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
.data("title", error.message)
.addClass("error")
.tooltip(); // Create a new tooltip based on the error messsage we just set in the title
});
},
submitHandler: function(form) {
alert("This is a valid form!");
}
});
这样就可以工作了。我也在其他情况下使用jQuery UI提示工具，使用相同的机制，只需将Bootstrap替换为它即可。
您可以在我的博客上查看演示：http://blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html。