添加 Bootstrap 3 弹出框会破坏 JQuery 验证插件

Question

我有一个表单，我正在使用JQuery 验证插件对其进行验证。验证工作文件，直到我将 Bootstrap 3 弹出窗口添加到名称为“taskName”（正在验证的）的文本字段（请参见下文）。当我将弹出窗口添加到此文本字段时，每次触发验证时都会重复显示错误消息。请参阅下面的代码摘录和屏幕截图。

我一直在试图弄清楚发生了什么，但到目前为止还没有成功。任何帮助将不胜感激。提前致谢！

HTLM 摘录

弹出窗口内容

<div id="namePopoverContent" class="hide">
    <ul>
        <li><small>Valid characters: [a-zA-Z0-9\-_\s].</small></li>
        <li><small>Required at least 3 characters.</small></li>
    </ul>
</div>

表格

<form class="form-horizontal" role="form"  method="post" action="" id="aForm">
    <div class="form-group has-feedback">
        <label for="taskName" class="col-md-1 control-label">Name</label>
        <div class="col-md-7">
            <input type="text" class="form-control taskNameValidation" id="taskName" name="taskName" placeholder="..." required autocomplete="off" data-toggle="popover">
            <span class="form-control-feedback glyphicon" aria-hidden="true"></span>
        </div>
    </div>
    ...
</form>

JQuery 验证插件设置

$(function() {
                //Overwriting a few defaults
                $.validator.setDefaults({
                    errorElement: 'span',
                    errorClass: 'text-danger',
                    ignore: ':hidden:not(.chosen-select)', 
                    errorPlacement: function (error, element) {
                       if (element.is('select'))
                           error.insertAfter(element.siblings(".chosen-container"));
                       else 
                           error.insertAfter(element);
                    }
                });

                //rules and messages objects
                $("#aForm").validate({
                    highlight: function(element) {
                        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
                    },
                    success: function(element) {
                        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
                    }
                });

                $('.taskNameValidation').each(function() {
                    $(this).rules('add', {
                        required: true,
                        alphanumeric: true,
                        messages: {
                            required: "Provide a space-separated name."
                        }
                    });
                });
            });

Bootstrap 3 弹出窗口设置

$('[data-toggle="popover"]').popover({ 
            trigger: "focus hover",
            container: "body",
            html: true,
            title: "Name Tips",
            content: function() { return $('#namePopoverContent').html();}
        });

截图

第一次编辑

看来我没有把问题说清楚，所以这是我的第一次编辑。

我没有使用弹出窗口来显示验证的错误消息。错误消息被插入到每个验证失败的字段之后，这正是我想要的。因此，这个问题似乎与之前提出的任何其他问题都没有重复。

关于弹出窗口，我只想添加一个信息丰富的弹出窗口，每当用户单击文本字段“taskName”或将鼠标悬停在其上时，都会显示该弹出窗口。它的作用完全独立于验证。

那么问题是，为什么添加（独立的）弹出窗口会使验证插件行为异常，如屏幕截图所示。

Answer 1

几天前我遇到了同样的问题，我发现的唯一解决方案是使用'label'作为我的errorElement:.

errorElement: 'span'更改该行errorElement: 'label'或仅删除整行即可暂时解决该问题。（'label'是默认值。）

我不完全确定 JQ validate + BS popover 冲突是什么，但我会继续调试。

经过一番调试后，我想我发现了问题。

jQuery validate 和 bootstrap 3 popover 都使用该aria-describedby属性。但是，弹出窗口代码会覆盖 jQuery 验证写入该属性的值。

示例：您有一个带有 的表单输入id = "name"，jQuery 验证会aria-describedby = "name-error"向输入添加一个属性，并id = "name-error"在该输入无效时创建一个错误消息元素。

使用或省略此行都有效，因为,errorElement:'label'的第 825 行被硬编码为默认错误元素选择器。 jquery.validate.jslabel

有两种方法可以解决此问题：

1. 将所有aria-describedby属性替换为另一个属性名称，例如data-describedby. 中有4篇参考文献jquery.validate.js。已测试。

或者

2. 在 .c 文件中的第 825 行后面添加以下代码jquery.validate.js：已测试。

if ( this.settings.errorElement != 'label' ) { selector = selector + ", #" + name.replace( /\s+/g, ", #" ) + '-error'; }

我还将通知 jQuery 验证开发人员。