如何正确地将工具提示与jQuery Validate集成

我有以下代码用于在工具提示中显示validation错误：

 
 Base Address: . . .  
 
  $("#NATIPRangeForm").validate({ rules: { ip: { required: true, min: 0, max: 255, number: true } }, showErrors: function (errorMap, errorList) { $.each(this.successList, function (index, value) { return $(value).popover("hide"); }); return $.each(errorList, function (index, value) { var _popover; console.log(value.message); _popover = $(value.element).popover({ trigger: "manual", placement: "bottom", content: value.message, template: "
" }); _popover.data("bs.popover").options.content = value.message; return $(value.element).popover("show"); }); } }); $("#menu-toggle").click(function (e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });  

这很好但有一个问题：

是否容易一次只显示一个错误弹出窗口？

Answer 1

您不应该将showErrors用于工具提示，因为此回调函数通常用于生成所有消息的列表，例如表单顶部的摘要。 “获取错误的映射作为第一个参数，将错误数组作为第二个参数。” 使用showErrors是报告问题的主要原因。 您希望错误一次，而不是一次。

您确实解释了如何构建工具提示，但是您需要使用其errorPlacement和success回调函数将您的工具提示插件与jQuery Validate集成; 这会将单个待处理的错误消息放在单个工具提示中。 此集成还取决于工具提示插件的可用选项…您可以动态更改工具提示中的文本吗？ 你能动态地/编程地显示/隐藏它们等吗？

更像是这样……

 $("#NATIPRangeForm").validate({ rules: { ip: { required: true, min: 0, max: 255, number: true } }, errorPlacement: function (error, element) { // put text of error into tooltip with $(error).text() // show tooltip }, success: function (label, element) { // hide the tooltip }, // any other options }); 

我正在使用像这样的ToolTipster jQuery插件 。

使用ToolTipster插件进行演示： http ： //jsfiddle.net/2DUX2/3/