jQuery验证弹出:删除元素的样式类

Question

目前，我正在工作的web应用程序，这将有多个步骤的形式。我正在通过jquery验证插件验证表单的每个部分。此外，我希望验证消息作为一个弹出。为此，我使用了jquery验证popover插件。两个图书馆都在为我服务。但我正面临一个有点奇怪的问题。

对于必需的字段，我希望输入框在模糊事件的红色边框中。当输入正确时，我想将错误类从div元素的样式中删除。我让这个东西在这里工作：http://plnkr.co/edit/369WMY7uDdRLNfC8NZrp?p=preview

$(function() {
   $('#myform').validate({
            rules: {
                personalEmail: {
                    email: true
                }
            },
            messages: {
                personalEmail: {
                    email: "Custom Message - Please fill email id in proper format"
                }
            },
            highlight: function (element) {
                $(element).closest('div').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('div').removeClass('has-error');
            },
            onsubmit: false,
            popoverPosition: 'top'
        });
})

当我在插件上添加验证弹出插件时，除了从输入框的样式中删除错误类之外，一切都进行得很顺利。我不知道为什么jquery不能从div元素的样式中删除error类。我在这里有一个奇怪的工作演示：http://plnkr.co/edit/7iHoypnc1P0x7eiGLtLj?p=preview

$(function() {
   $('#myform').validate_popover({
            rules: {
                personalEmail: {
                    email: true
                }
            },
            messages: {
                personalEmail: {
                    email: "Custom Message - Please fill email id in proper format"
                }
            },
            highlight: function (element) {
                $(element).closest('div').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('div').removeClass('has-error');
            },
            onsubmit: false,
            popoverPosition: 'top'
        });
})

我搞不懂为什么会发生这种事。在验证popover插件的内部有什么漏洞吗？

Answer 1

您需要实现取消突出显示。

// Code goes here
$(function () {
    $('#myform').validate_popover({
        rules: {
            personalEmail: {
                email: true
            }
        },
        messages: {
            personalEmail: {
                email: "Custom Message - Please fill email id in proper format"
            }
        },
        highlight: function (element) {
            $(element).closest('div').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('div').removeClass('has-error');
        },
        onsubmit: false,
        popoverPosition: 'top'
    });
})

演示：柱塞