添加 Bootstrap 3 个弹出窗口中断 JQuery 验证插件

Question

我有一个表格，我正在使用 JQuery Validation plugin 对其进行验证。验证工作文件，直到我将 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" 或将鼠标悬停在其上，它就会显示。它的作用完全独立于验证。

那么问题是，为什么添加 (independent) 弹出窗口会导致验证插件行为异常，如屏幕截图所示。

Answer 1

仅当您需要在 "valid" 元素上显示错误标签元素时才应使用 success 选项，而不是为了切换类。

你应该使用 unhighlight 到 "undo" 无论 highlight 做了什么。

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');
}

(The success option could also be used in conjunction with the errorPlacement option to show/hide tooltips or popovers, 就是不做样式, 最好留给highlight和unhighlight.)

此外，我建议让验证插件 create/show/hide 错误标签元素，而不是自己放置标记。否则，插件将创建自己的插件并忽略您创建的插件。

如果您不知道，您不能在不包含 the additional-methods.js file.

的情况下使用 alphanumeric 规则

Answer 2

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

将行 errorElement: 'span' 更改为 errorElement: 'label' 或简单地删除整行将暂时解决问题。（'label' 是默认值。）

JQ validate + BS popover冲突是什么我不是很清楚，但我会继续调试

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

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

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

使用 errorElement:'label' 或省略此行是可行的，因为在 jquery.validate.js 的第 825 行，label 被硬编码为默认错误元素选择器。

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

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

或

在jquery.validate.js中第825行后添加如下代码。 已测试。

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

我也会通知 jQuery 验证开发人员。

添加 Bootstrap 3 个弹出窗口中断 JQuery 验证插件

Adding Bootstrap 3 popover breaks JQuery Validation Plugin

forms

jquery-validate

popover

twitter-bootstrap