javascript - 覆盖 errorPlacement 时,jQuery 验证未显示正确的错误

标签 javascript jquery twitter-bootstrap jquery-validate tooltip

我正在用 Bootstrap 中的工具提示替换默认错误,覆盖 errorPlacement 方法。但是,当需要项目并且还具有任何其他类型的验证时,所需的内容将取代任何其他错误。

我想知道我是否在验证中遗漏了某些内容,或者这是否是预期的行为。

jsfiddle 中的示例如下:http://jsfiddle.net/CwnUR/8/

$(function() {
    $('form').validate({
       errorElement: 'span',
       errorClass: 'error',
       validClass: 'success',
       errorPlacement: function (error, element) {

            element.attr({ 'title': error.text() }).tooltip({
                placement: 'right',
                trigger: 'manual',
                delay: { show: 500, hide: 5000 }
            }).tooltip('show');

        },
        success: function (label, element) {
            $(element).tooltip('destroy');
        }
    });

    $("#exampleInputEmail1").rules("add", {
        required: true,
        email: true
    });

    $("#exampleInputEmail2").rules("add", {
        required: true,
        equalTo: $("#exampleInputEmail1"),
        messages: {
            equalTo: 'Please retype the same email again.'
        }
    });

});

最佳答案

问题是工具提示未正确更新。当错误首次触发时,它会显示正确的警告。例如,如果我使用空电子邮件地址单击“提交”,则会收到正确的错误消息,指出该字段为必填字段。任何后续尝试获取任何其他错误(例如无效的电子邮件地址)都不会显示。但是,如果我在点击提交之前写一些文本,我会收到无效的电子邮件地址错误,然后它会取代任何其他错误。

因此,为了使其正常工作,我所做的就是销毁 errorPlacement 函数内的工具提示。

代码摘录:

errorPlacement: function (error, element) {
    $(element).tooltip('destroy');
    element.attr({
        'title': error.text()
    }).tooltip({

关于javascript - 覆盖 errorPlacement 时,jQuery 验证未显示正确的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22407948/

相关文章:

javascript - 即使单击标签区域, Bootstrap 也会打开默认表单输入。我该如何防止这种情况?

html - Bootstrap 3 2 列表单布局

javascript - 将鼠标悬停在导航栏中的链接上时如何使网页的其余部分变暗

javascript - 生成二维码的算法是否存在随机性

javascript - 如何定义同名的 Typescript 构造函数和工厂函数?

javascript - 如何对 1 :1 object map in Angular JS ng-repeat 进行排序

javascript - 在流程图线工具提示中显示信息时出错

javascript - 显示最终结果的分步表格

javascript - 带有 Rxjs 问题的 Redux 可观察史诗

jquery - 第一个 Accordion 元素开始打开