如何使用Twitter Bootstrappopup的jQueryvalidation通知？
我可以很容易地使用bootstrap使popup窗口出现，而且我也可以使用标准的jQueryvalidation插件或jQueryvalidation引擎进行validation ，但我无法弄清楚如何向另一个馈送一个。
我想我需要的是一个钩子，当validation者想要显示一个通知的时候调用它，给它一个闭包，把消息和目标元素传递给一个popover。 这似乎是一种dependency injection。
理论上都很好，但是我不能确定钩子在哪里，或者哪怕存在于validation引擎中。 他们都似乎意图承担显示通知与各种精心devise的选项放置，包装，风格时，我所追求的是错误types（我不一定需要消息文本）和它涉及元素至。 我已经find了整个表单的钩子，而不是单个的通知。
我更喜欢使用类来定义规则的validation系统，因为它们与dynamic创build的表单很好地协作。
任何人都有一个解决scheme或更好的主意？
看看highlight和showErrors jQuery Validator选项 ，这些选项可以让你在你自己的自定义错误突出显示中触发Bootstrappopup窗口。
这是一个动手的例子：
$('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); } });
它并不真的使用bootstrappopup，但它看起来非常好，很容易实现。
UPDATE
所以，要进行popovervalidation，您可以使用以下代码：
$("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 。
克里斯·福尔斯托（Chris Fulstow）说得没错，但是还是花了我一段时间，所以inheritance了这个完整的代码：
这显示了错误的popup窗口，并隐藏了默认的错误标签：
$('#login').validate({ highlight: function(element, errClass) { $(element).popover('show'); }, unhighlight: function(element, errClass) { $(element).popover('hide'); }, errorPlacement: function(err, element) { err.hide(); } }).form();
这设置了popover。 你唯一需要的就是触发器：'manual'
$('#password').popover({ placement: 'below', offset: 20, trigger: 'manual' });
传入到popover的标题和内容属性不起作用，所以我在data-content ='最less5个字符'和data-original-title ='无效密码'的#passwordinput中指定了它们。 你的表单中还需要rel ='popover'。
这个工作，但popover闪烁在取消select。 任何想法如何解决？
以下是Varun Singh提出的优秀build议，可以防止validation的“闪烁”问题不断尝试“显示”，即使popup窗口已经存在。 我只是添加了一个错误状态数组来捕获哪些元素显示错误，哪些不是。 奇迹般有效！
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扩展jQueryvalidation插件（testing版本1.9.0）将做的伎俩。
这也增加了一些Rails-esk错误消息。
我更喜欢改变bootstrap的CSS。 只需在正确的位置添加jQueryvalidation的类。 字段validation错误和inputvalidation错误
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; }
这是我用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'); }});
请看下面的内容：
– 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版本，但带有工具提示。 在我看来，它比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'); }); } });
我就是这样做的。 但是它涉及对validation脚本进行2次更改（我在此处获得了bootstrap 1.4的代码，然后对其进行了修改 – http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap / ）
我的电话validation：
$("#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函数中，创build标签部分）在.addClass(this.settings.errorClass)添加行： .addClass("help-inline")
有人也许可以find一种方法来应用第二次修复的validationfunction，但我还没有find一种方法，因为showLabel后高亮调用。
这是我在我的validation，以符合Twitter Bootstrap准则。 错误validation消息放在<span class=help-inline> ，我们想突出显示外部容器是error还是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'); }
不知道这是否与讨论有关，因为原来的海报要求挂钩来显示/隐藏自举popup。
我正在寻找简单的validation和popup并不重要。 一个相关的post和谷歌search结果中的第一个已被标记为这个问题的重复。 因此，提到这个优秀的@ReactiveRaven的jqValidation JS，恰当地称为jqBootstrapValidation，与Twitter Bootstrap很好地结合在一起是有道理的。 安装程序只需要几分钟。 在这里下载。
希望这增加了价值。
tl; dr避免需要通过使用哈希映射来存储元素的ID来枚举明确的popup，并且创build即时popup（混搭Jeffrey Gilbert和Kenny Meyer的方法）。
这是我的看法，它解决了别人提到的闪烁问题，但不像@Jeffrey Gilbert的答案，不使用列表（ errorStates ），而是使用错误地图 。 散列图FTW。 我想我记得在某个地方阅读CS中的每个问题都可以用散列图解决:)
var err_map = new Object(); // <--- nb $("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方法popup将导致闪烁的问题。
以上是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"); }); }
如果使用上面的Kenny Meyer代码popup窗口，请注意，检查字段内容但不是必需的规则（如有效的URL）将导致popup窗口在清除字段时不会消失。 请参阅下面的onkeyup解决scheme。 如果有人有更好的解决scheme，请发布。
onkeyup: function(element, event) { if($(element).valid()) { return $(element).popover("hide"); } }
