我可以很容易地使用引导程序使弹出框出现，我还可以使用标准jQuery 验证插件或jQuery 验证引擎进行验证，但我不知道如何将一个输入另一个。
我认为我需要的是验证器在它想要显示通知时调用的一些钩子，给它一个将消息和目标元素传递给弹出框的闭包。这似乎是一种依赖注入。
理论上一切都很好，但我就是不知道那个钩子在哪里，或者即使一个验证引擎中存在一个。当我所追求的只是错误类型（我什至不需要消息文本）和它相关的元素时，他们似乎都打算负责显示带有各种精心设计的放置、包装、样式选项的通知至。我找到了整个表单的钩子，而不是单个通知。
我更喜欢使用类来定义规则的验证系统，因为它们可以很好地与动态创建的表单配合使用。
有人有解决方案或更好的主意吗？
这是一个动手示例：
$('form').validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
}
});
它并没有真正使用引导弹出框，但它看起来非常好并且很容易实现。
更新
因此，要进行弹出框验证，您可以使用以下代码：
$("form").validate({
rules : {
test : {
minlength: 3 ,
required: true
}
},
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: "top",
content: value.message,
template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
});
// Bootstrap 3.x :
//_popover.data("bs.popover").options.content = value.message;
// Bootstrap 2.x :
_popover.data("popover").options.content = value.message;
return $(value.element).popover("show");
});
}
});
你会得到这样的东西：
查看jsFiddle。
看一下jQuery Validator 选项highlight，这些选项可以让你加入你自己的自定义错误高亮，触发 Bootstrap 弹出框。showErrors
Chris Fulstow 是对的，但我还是花了一些时间，所以这里是完整的代码：
这会显示错误弹出框，并隐藏默认错误标签：
$('#login').validate({
highlight: function(element, errClass) {
$(element).popover('show');
},
unhighlight: function(element, errClass) {
$(element).popover('hide');
},
errorPlacement: function(err, element) {
err.hide();
}
}).form();
这设置了弹出框。您唯一需要的是触发器：'手动'
$('#password').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
传递给 popover 的标题和内容属性不起作用，所以我在我的 #password 输入中使用 data-content='Minimum 5 characters' 和 data-original-title='Invalid Password' 指定了它们。您还需要 rel='popover' 在您的表单中。
这可行，但取消选择时弹出框会闪烁。知道如何解决吗？
这是 Varun Singh 出色建议的后续行动，它可以防止验证的“闪烁”问题不断尝试“显示”，即使弹出窗口已经存在。我只是添加了一个错误状态数组来捕获哪些元素显示错误，哪些没有。奇迹般有效！
var errorStates = [];
$('#LoginForm').validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass) {
if($.inArray(element, errorStates) == -1){
errorStates[errorStates.length] = element;
$(element).popover('show');
}
},
unhighlight: function (element, errorClass, validClass) {
if($.inArray(element, errorStates) != -1){
this.errorStates = $.grep(errorStates, function(value) {
return value != errorStates;
});
$(element).popover('hide');
}
},
errorPlacement: function(err, element) {
err.hide();
}
});
$('#Login_unique_identifier').popover({
placement: 'right',
offset: 20,
trigger: 'manual'
});
$('#Login_password').popover({
placement: 'right',
offset: 20,
trigger: 'manual'
});
这个用于 jQuery Validation Plugin 的 jQuery 扩展（使用 1.9.0 版测试）可以解决问题。
这也增加了一些 Rails-esk 错误消息。
我更喜欢更改引导程序的 CSS。刚刚在正确的地方添加了 jQuery validate 的类。字段验证错误和输入验证错误
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
color: #b94a48;
border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
请看以下内容：
- https://gist.github.com/3030983
我认为这是最简单的。
编辑
来自链接的代码：
$('form').validate({
rules: {
numero: {
required: true
},
descricao: {
minlength: 3,
email: true,
required: true
}
},
showErrors: function (errorMap, errorList) {
$.each(this.successList, function (index, value) {
$(value).popover('hide');
});
$.each(errorList, function (index, value) {
console.log(value.message);
var _popover = $(value.element).popover({
trigger: 'manual',
placement: 'top',
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('popover').options.content = value.message;
$(value.element).popover('show');
});
}
});
这就是我使用 Bootstrap 2.x 和 jQuery Validate 1.9 的方式
$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight: function (element, errorClass) {
$(element).parent().parent().addClass('error');
}, unhighlight: function (element, errorClass) {
$(element).parent().parent().removeClass('error');
}});
非常感谢您的提醒！这是我的 Bootstrap 版本，但带有工具提示。在我看来，它比popovers更优雅。我知道这个问题是针对弹出框的，所以请不要因此而投反对票。也许有人会喜欢这种方式。当我在寻找一些东西时，我喜欢在 Stackoverflow 上找到新的想法。注意：表格上不需要标记。
$('#LoginForm').validate({
rules: {
password: {
required: true,
minlength: 6
},
email_address: {
required: true,
email: true
}
},
messages: {
password: {
required: "Password is required",
minlength: "Minimum length is 6 characters"
},
email_address: {
required: "Email address is required",
email: "Email address is not valid"
}
},
submitHandler: function(form) {
form.submit();
},
showErrors: function (errorMap, errorList) {
$.each(this.successList, function (index, value) {
$('#'+value.id+'').tooltip('destroy');
});
$.each(errorList, function (index, value) {
$('#'+value.element.id+'').attr('title',value.message).tooltip({
placement: 'bottom',
trigger: 'manual',
delay: { show: 500, hide: 5000 }
}).tooltip('show');
});
}
});
这就是我实现它的方式。但它涉及对验证脚本进行 2 处更改（我在这里获得了 bootstrap 1.4 的代码，然后对其进行了修改 - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap/ )
我的验证电话：
$("#loginForm").validate({
errorClass: "control-group error",
validClass: "control-group success",
errorElement: "span", // class='help-inline'
highlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
} else {
$(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
}
},
unhighlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
} else {
$(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
}
}
});
然后您需要在 jquery.validate.js 中更改 2 件事
1. 应用此修复 - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. 在第 647 行之后（在 showLabel 函数中，创建标签部分) 行后.addClass(this.settings.errorClass)添加行：.addClass("help-inline")
有人可能会找到一种方法来在验证函数中应用第二个修复，但我还没有找到方法，因为在突出显示之后调用了 showLabel。
这是我在验证中加入的内容，以符合 Twitter Bootstrap 指南。错误验证消息放在 a 中<span class=help-inline>，我们希望将外部容器突出显示为erroror success：
errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}
这是对Kenny Meyer 上述出色答案的更新。有几个问题阻止了它为我工作，我在这个片段中解决了这些问题：
showErrors: function (errorMap, errorList) {
$.each(this.successList, function (index, element) {
return $(element).popover("destroy");
});
$.each(errorList, function (index, error) {
var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover
ele.popover({
trigger: "manual",
placement: "top",
content: function(){ //use a function to assign the error message to content
return error.message
},
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
});
//bs.popover must be used, not just popover
ele.data("bs.popover").options.content = error.message;
return $(error.element).popover("show");
});
}
tl; dr避免需要通过使用哈希映射来存储元素的 id 来枚举显式弹出框，并即时创建弹出框（混搭 Jeffrey Gilbert 和 Kenny Meyer 的方法）。
这是我的看法，它解决了其他人提到的闪烁问题，但与@Jeffrey Gilbert 的回答不同，它不使用 list ( errorStates) 而是使用 error map。哈希映射 FTW。我想我记得在某处读过，CS 中的每个问题都可以用哈希图解决：）
var err_map = new Object(); // <--- n.b.
$("form#set_draws").validate({
rules: {
myinput: { required: true, number: true },
},
showErrors: function(errorMap, errorList) {
$.each(this.successList, function(index, value) {
if (value.id in err_map)
{
var k = err_map[value.id];
delete err_map[value.id]; // so validation can transition between valid/invalid states
k.popover("hide");
}
});
return $.each(errorList, function(index, value) {
var element = $(value.element);
if( ! (value.element.id in err_map) ) {
var _popover = element.popover({
trigger: "manual",
placement: "top",
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("popover").options.content = value.message;
err_map[value.element.id] = _popover;
return err_map[value.element.id].popover("show");
}
});
}
});
感谢所有其他对此发表想法的人。
签出：https ://github.com/mingliangfeng/jquery.validate.bootstrap.popover
它展示了如何使用 Bootstrap popover css，而不是 JS。JS 方法弹出会导致闪烁问题。
如果将上述 Kenny Meyer 代码用于弹出窗口，请注意检查字段内容但不是必需的规则（例如有效 URL）将导致弹出窗口在清除字段时不会消失。有关解决方案，请参见下面的 onkeyup。如果有人有更好的解决方案，请发布。
onkeyup: function(element, event) {
if($(element).valid()) {
return $(element).popover("hide");
}
}