jQuery Validate，Select2和Bootstrap 3 Popovers – 如何将Popover绑定到Select2的父元素而不是隐藏的选择元素

我已经实现了使用Bootstrap 3的Popovers来显示validation错误消息的优秀方法，并且在大多数情况下它运行良好 – 除了隐藏或替换的元素，如Select2或CKEditor。 弹出窗口正确地定位在常规元素（如输入和正常选择）上，但不是选择2增强的选择。

我创建了一个Sparky固定的小提琴，所以它实际上有效： http ： //jsfiddle.net/jemxtthb/4/

$("#noticeSentTo").select2(); var validator = $("#documentAdmin").validate({ debug: true, ignore: "", showErrors: function(errorMap, errorList) { $.each(this.successList, function(index, value) { return $(value).popover("hide").parents(".form-group").removeClass('has-error').addClass('has-success'); }); return $.each(errorList, function(index, value) { var _popover; _popover = $(value.element).popover({ trigger: "manual", placement: "auto top", content: value.message, container: "body", template: "
" }); _popover.data("bs.popover").options.content = value.message; return $(value.element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success'); }); } }); }); 

这是我在应用程序中看到的屏幕截图：

我已经尝试在弹出窗口上使用selector选项，但无法弄清楚如何指定弹出窗口应用的当前元素（如果这是正确的方法）。

正如你从我的屏幕截图中看到的那样，弹出窗口出现在元素的最左边（红色）它应该被绑定，因为Select2隐藏了原始选择。

更新：基于@Sparky的建议，我已将其更改为使用errorPlacement而不是我之前使用的方法 – 现在唯一的问题是获得条件，如果它是隐藏元素（如Select2或CKEditor）以提供Popup到父对象而不是元素本身（因为Popovers无法在隐藏元素上工作，显然 ） – 我已经放入了一些调试console.log代码，只是为了确保jQuery中的if语句正确触发：

 var validator = $("#documentAdmin").validate({ ignore: [], errorPlacement: function (error, element) { var lastError = $(element).data('lastError'), newError = $(error).text(); $(element).data('lastError', newError); if (newError !== '' && newError !== lastError) { $(element).popover({ trigger: "manual", placement: "auto top", content: newError, container: "body", template: "
" }); if (element.is(':hidden')) { // $(element).next().parents(".form-group").addClass('has-error').removeClass('has-success').popover("show"); $(element).next('span').popover('show').addClass('has-error').removeClass('has-success'); console.log('hidden element'); } else { $(element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success'); console.log('normal element'); } } }, success: function (label, element) { $(element).popover("hide").parents(".form-group").removeClass('has-error').addClass('has-success'); } }); 

这是一个更新的小提琴： http ： //jsfiddle.net/jemxtthb/6/

好的 – 真奇怪 – 上面的小提琴实际上按预期工作！ 现在我需要弄清楚为什么它在小提琴中起作用而不是我的应用程序……

任何帮助/指导表示赞赏！

Answer 1

查看JavaScript控制台中的错误并在jsFiddle中修复以下内容…

1. 如果预先加载了一个值，则select元素进行validation是没有意义的。 换句话说，没有任何内容可以validation每个option已包含值，或者是否存在具有selected属性的value的option 。 通常，第一个option包含value="" 。

    Please select 

2. 您的Bootstrap脚本文件出现404错误。 CDNurl被破坏了。

3. 不重要，但应该ignore: [] ，不要ignore: "" 。

4. 您在调试控制台中收到“无’名称’分配”错误，因为Select2创建的隐藏input元素不包含name属性。 它现在显然不是问题，但当页面上有更多元素时，它可能是一个问题。 jQuery Validate插件要求所有要validation的元素都包含name属性。

演示： http ： //jsfiddle.net/jemxtthb/4/

---

在大多数情况下它运作良好 – 除了隐藏或替换元素，如Select2或CKEditor。 弹出窗口正确地定位在常规元素（如输入和正常选择）上，但不是选择2增强的选择。

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

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

然后在 errorPlacement您可以有条件地定位某些元素，以便在Select2隐藏元素等时调整位置。

更像是这样……

 $("#documentAdmin").validate({ ignore: [], errorPlacement: function (error, element) { // put text of error into tooltip with $(error).text() // conditional placement of the tooltip // show the tooltip }, success: function (label, element) { // hide the tooltip }, // any other options }); 

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

Answer 2

事实certificate，上面的代码从一开始就正常工作 – 在@Sparky修复我的小提琴之后，popover工作正常，将自己定位在与Select2的父元素相关的位置。

从中获得了什么好处是@ Sparky建议使用errorPlacement与我最初使用的方法相比，这可以更好地控制各个元素的错误消息放置方法。

我目前正在调查（并怀疑）罪魁祸首是我用于侧边栏的一个offcanvas插件 – 我没有将其包含在Fiddle中，因为我想让小提琴尽可能简洁地解决问题，而不是让事情复杂化。 当我发现问题所在时，我会更新这个。 如果有人对Bootstrap 3 Popovers中的validation错误实现此方法感兴趣，我会使用我发布的第二个小提琴中的代码。