用于显示验证器消息的 jquery 工具提示
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4381476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery tooltip to display validator messages
提问by Runar Halse
Im trying to display error messages for the jquery validator plugin(the bassistance one) as a tooltip above the component when the validation fails. The tooltip(also the bassistance one) just wont show, so I was wondering how to get this stuff working. My code so far:
当验证失败时,我试图将 jquery 验证器插件(bassistance 插件)的错误消息显示为组件上方的工具提示。工具提示(也是低音提琴)不会显示,所以我想知道如何让这些东西工作。到目前为止我的代码:
$("#loginForm").validate({
errorPlacement: function(error, element) {
$(element).tooltip({
content: 'the error message goes here'
});
}
});
Also, I was wondering how I can get hold of the actual localised error message to display. I do not want to hardcode it into the tooltip as I've done in the snippet above.
另外,我想知道如何获取要显示的实际本地化错误消息。我不想将它硬编码到工具提示中,就像我在上面的代码片段中所做的那样。
Any help is much appreciated! ;)
任何帮助深表感谢!;)
回答by mpccolorado
One way for doing this (without tooltip plugin) is with some off css code and some of imagination:
这样做的一种方法(没有工具提示插件)是使用一些关闭的 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");
}
});
Instead of only a label for errors i create this html for errors:
我不仅为错误创建了一个标签,还为错误创建了这个 html:
<div class="Ntooltip">
<label for="nombre" generated="true" class="error">Requerido</label>
<div class="errorImage"></div>
</div>
With css code we are going to hide this labels to the user. But the errorImage is always visible (when the element is created, of course). And, when the user hover over it, the label will show:
使用 css 代码,我们将向用户隐藏此标签。但是 errorImage 始终可见(当然,在创建元素时)。而且,当用户将鼠标悬停在它上面时,标签将显示:
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;
}
And for making the tooltips visible out of the bounds of its parents you must change the parent's overflow property to visible. If you are using jQueryUI see the css for making those changes.
为了使工具提示在其父级边界之外可见,您必须将父级的溢出属性更改为可见。如果您使用 jQueryUI,请查看用于进行这些更改的 css。
overflow: visible;
And this is how it looks:
这是它的外观:
Edit: Created JSFiddle for demonstration, updated onfocusout
method
编辑:为演示创建了 JSFiddle,更新了onfocusout
方法
回答by Michael W.
回答by John Reilly
I've been able to do this using Bootstrap's tooltip mechanism. With the Bootstrap JS / CSS loaded then you can initialise the validation and pass the showErrors function like this:
我已经能够使用 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!");
}
});
});
And that's it working. I've also done this in other circumstances using jQuery UI tooltip using the same mechanism and just swapping out the Bootstrap stuff for this.
这就是它的工作原理。我也在其他情况下使用 jQuery UI 工具提示使用相同的机制完成了此操作,并为此交换了 Bootstrap 的内容。
You can see a demo on my blog here: http://blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html
你可以在我的博客上看到一个演示:http: //blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html