Question

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

我一直试图找出正在发生的事情，到目前为止还没有成功。任何帮助将不胜感激。提前谢谢！

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 popover setup

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

屏幕截图 Screenshot 1 Screenshot 2

首次修改

似乎我没有明白我的问题，所以这是我的第一次编辑。

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

关于popover，我只想添加一个信息性的popover，只要用户点击文本字段＆＃34; taskName＆＃34;或将鼠标悬停在它上面。它的作用完全独立于验证。

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

Answer 1

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

将行errorElement: 'span'更改为errorElement: 'label'，或者只需删除整行即可暂时解决问题。（'label'是默认值。）

我不完全确定JQ验证+ BS弹出冲突是什么，但我会继续调试。

经过一些调试后我觉得我发现了这个问题。

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

示例：您的表单输入带有id = "name"，jQuery validate会在输入中添加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验证开发人员。

Answer 2

只有在需要在“valid”元素上显示错误标签元素时才应使用success选项，而不是用于切换类。

您应该使用unhighlight来“撤消”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。）

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

如果您不知道，如果不包含the additional-methods.js file，则无法使用alphanumeric规则。

添加Bootstrap 3 popover会破坏JQuery Validation Plugin

2 个答案: