jquery工具提示显示validation器消息

我试图在validation失败时显示jqueryvalidation器插件（低音缓冲器插件）的错误消息作为组件上方的工具提示。 工具提示（也是低音的）只是不会显示，所以我想知道如何使这些东西工作。 我的代码到目前为止：

$("#loginForm").validate({ errorPlacement: function(error, element) { $(element).tooltip({ content: 'the error message goes here' }); } }); 

另外，我想知道如何抓住要显示的实际本地化错误消息。 我不想将其硬编码到工具提示中，就像我在上面的代码片段中所做的那样。

任何帮助深表感谢！ ;）

Answer 1

这样做的一种方法（没有工具提示插件）是一些关闭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 = $('
'); container.addClass('Ntooltip'); // add a class to the wrapper error.insertAfter(element); error.wrap(container); $("
").insertAfter(error); }, success: function(element) { $(element).addClass("checked"); } }); 

而不是只有一个标签的错误我创建此html的错误：

 
 Requerido 
  

使用css代码，我们将向用户隐藏此标签。 但是errorImage总是可见的（当然，当创建元素时）。 并且，当用户将鼠标hover在它上面时，标签将显示：

 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; } 

要使工具提示在其父级的边界外可见，您必须将父级的overflow属性更改为visible。 如果您使用的是jQueryUI，请参阅css以进行这些更改。

 overflow: visible; 

这就是它的样子：

编辑：创建JSFiddle进行演示，更新onfocusout方法

https://jsfiddle.net/2vc5vmr0/

Answer 2

其他人可以找到这个解决方案：

我希望通过更强大的插件实现同样的目标，并且我找到了qtip2 。 它可以很好地与jQuery Validate集成，如您所见

Answer 3

我找到的唯一方法就是 ……

Answer 4

我已经能够使用Bootstrap的工具提示机制来做到这一点。 加载Bootstrap JS / CSS后，您可以初始化validation并传递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