我有以下代码用于在工具提示中显示验证错误：
<form name="NATIPRangeForm">
<div class="input-group">
<strong class="ip-value-title">Base Address:</strong>
<input class="ip-input" type="number" id="ip_seg_1" name="ip" ng-model="nat.ip.seg1" min="0" max="255" required>.
<input class="ip-input" type="number" id="ip_seg_2" name="ip" ng-model="nat.ip.seg2" min="0" max="255" required>.
<input class="ip-input" type="number" id="ip_seg_3" name="ip" ng-model="nat.ip.seg3" min="0" max="255" required>.
<input class="ip-input" type="number" id="ip_seg_4" name="ip" ng-model="nat.ip.seg4" min="0" max="255" required>
</div>
</form>
<script>
$("#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: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
});
_popover.data("bs.popover").options.content = value.message;
return $(value.element).popover("show");
});
}
});
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
这很好用，但是有一个问题：
一次仅显示一个错误弹出窗口是否容易？
最佳答案
您不应在工具提示中使用showErrors，因为此回调函数通常用于生成所有消息的列表，例如表单顶部的摘要。 "Gets the map of errors as the first argument and an array of errors as the second."使用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
});
I'm using the ToolTipster jQuery plugin like this。
使用ToolTipster插件的演示：http://jsfiddle.net/2DUX2/3/
关于javascript - 如何将工具提示与jQuery Validate正确集成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28241267/