Forms 添加Bootstrap3Popover会中断JQuery验证插件

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

我一直在想到底发生了什么事，但到目前为止没有成功。任何帮助都将不胜感激。提前谢谢

HTLM摘录

popover内容

Bootstrap 3 popover设置

截图

第一次编辑

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

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

关于popover，我只想添加一个信息性的popover，每当用户单击文本字段“taskName”或将鼠标悬停在上面时，它就会显示出来。它的作用完全独立于验证

---

那么，问题是，为什么添加（独立的）popover会使验证插件行为不正常，如屏幕截图所示。

只有在需要在“有效”元素上显示错误标签元素时，才应使用

成功

选项，而不是用于切换类

您应该使用

unhighlight

来“撤消”突出显示所做的任何操作

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');
},
unhighlight: function(element) {
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
     $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}

（，只是不做样式设置，最好让

高亮显示

和

取消高亮显示

）

---

另外，我建议让Validate插件创建/显示/隐藏错误标签元素，而不是自己将其放入标记中。否则，插件将创建自己的插件并忽略您创建的插件

---

---

如果您不知道，则不能在不包括的情况下使用

字母数字

规则。

仅当您需要在“有效”元素上显示错误标签元素时，才应使用

成功

选项，而不是用于切换类

您应该使用

unhighlight

来“撤消”突出显示所做的任何操作

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');
},
unhighlight: function(element) {
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
     $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}

（，只是不做样式设置，最好让

高亮显示

和

取消高亮显示

）

---

另外，我建议让Validate插件创建/显示/隐藏错误标签元素，而不是自己将其放入标记中。否则，插件将创建自己的插件并忽略您创建的插件

---

---

如果您不知道，您不能使用

字母数字规则而不包括。
几天前我遇到了同样的问题，我找到的唯一解决方案是使用
'label'
作为我的
错误元素：

将行
errorElement:'span'
更改为
errorElement:'label'
，或者只需删除整行即可临时解决问题。（
“标签”
是默认设置。）

我不完全确定jqvalidate+bspopover冲突是什么，但我将继续调试

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

jqueryvalidate和bootstrap3弹出窗口都使用了
ariasdescripbedby
属性。但是，popover代码正在覆盖jQuery validate写入该属性的值

示例：您有一个带有
id=“name”
的表单输入，jQuery validate在输入中添加一个
aria descripeby=“name error”
属性，并在该输入无效时创建一个带有
id=“name error”
的错误消息元素

使用
errorElement:“label”
或省略这一行是有效的，因为在
jquery.validate.js
的第825行，
label
硬编码为默认错误元素选择器

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

将所有
aria descripeby
属性替换为另一个属性名称，如
data descripeby
。
jquery.validate.js
中有4个引用测试。
或

在
jquery.validate.js
中的第825行之后添加以下代码测试。
if（this.settings.errorElement！=“label”）{
选择器=选择器+”，#“+名称。替换（/\s+/g，，#“+”）-“错误”；
}

我还将通知jQuery验证开发人员。
几天前我遇到了同样的问题，我找到的唯一解决方案是使用
'label'
作为我的
错误元素：

将行
errorElement:'span'
更改为
errorElement:'label'
，或者只需删除整行即可临时解决问题。（
“标签”
是默认设置。）

我不完全确定jqvalidate+bspopover冲突是什么，但我将继续调试

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

jqueryvalidate和bootstrap3弹出窗口都使用了
ariasdescripbedby
属性。但是，popover代码正在覆盖jQuery validate写入该属性的值

示例：您有一个带有
id=“name”
的表单输入，jQuery validate在输入中添加一个
aria descripeby=“name error”
属性，并在该输入无效时创建一个带有
id=“name error”
的错误消息元素

使用
errorElement:“label”
或省略这一行是有效的，因为在
jquery.validate.js
的第825行，
label
硬编码为默认错误元素选择器

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

将所有
aria描述替换为
$(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."
                        }
                    });
                });
            });

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

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');
},
unhighlight: function(element) {
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
     $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}