jQuery validate popover:删除元素's风格的类

jQuery validate popover: Removing element's style class

本文关键字：风格 popover validate 删除 元素 jQuery      更新时间：2023-09-26

目前我正在开发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'
        });
})

当我添加validate pop-over插件时，除了从输入框的样式中删除错误类之外，一切都很好。我不知道为什么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插件内部有什么漏洞吗？

您需要实现取消高亮

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

演示：plunker

相关文章：