在我看来，jquery-validation showErrors阻止了高亮和取消高亮的动作。
在html中，我有一个必需的表单组：
<form id="ValidationForm" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<div class="form-group required">
<label class="col-xs-3 control-label" for="Letters">Letters</label>
<div class="col-xs-9 controls">
<input class="form-control input-md" id="Letters" name="Letters" type="text" placeholder="Letters" />
</div>
</div>
<div class="col-xs-4">
<input id="btnSave" class="btn btn-default" type="submit" value="Save Changes" name="btnSave">
</div></form>
在javascript中，我为验证器定义了规则：
var rules = {
rules: {
"Letters": { required: true }
},
submitHandler: function (form) {
$('#btnSave').prop("disabled", true);
form.submit();
},
highlight: function (element, errorClass) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element, errorClass) {
$(element).closest('.form-group').removeClass('has-error');
},
showErrors: function(errorMap, errorList) {
$.each(this.successList, function(index, value) {
return $(value).popover("hide");
});
return $.each(errorList, function(index, value) {
var _popover;
_popover = $(value.element).popover({
trigger: "manual",
placement: "auto",
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");
});
}
};
$("#ValidationForm").validate(rules);
如果删除showErrors并按提交按钮，则表单组添加了“ has-errors”类，并且输入边框显示为红色。添加showErrors时，此突出显示功能消失。有什么想法吗？
最佳答案
在我看来，jquery-validation showErrors阻止了高亮和取消高亮的动作。
我不确定您要达到什么最终效果，因为您从未解释过。但是，highlight和unhighlight选项仅用于控制应该在输入旁边显示消息时发生的情况。而showErrors option用于在页面上某个位置创建所有错误的集中汇总。我不知道您如何或为什么要将两者一起使用，我也不完全确定一个选项如何“阻止”另一个。
查看showErrors函数中的代码后，您似乎正在尝试为每条消息创建弹出效果。在这种情况下，showErrors不是用于此目的的正确选择。
您想将errorPlacement和success选项用于工具提示或弹出窗口。这些选项会在每个错误发生时一次对每个输入进行操作，而showErrors将在表单上任何地方出现错误时触发。
errorPlacement: function (error, element) {
// put text of error into tooltip with $(error).text()
// show tooltip
},
success: function (label, element) {
// hide the tooltip
},
请参阅下面的我的答案，其中更详细地讨论了这一点：
https://stackoverflow.com/a/28241902/594235