Question

目前我正在开发具有多步骤表单的Web应用程序。我通过jquery validate插件验证表单的每个部分。此外，我想要验证消息作为弹出窗口。为此，我使用了jquery validate 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'
        });
})

当我添加验证pop over插件时，除了从输入框的样式中删除错误类之外，一切都很顺利。我不知道为什么jquery无法从div元素的样式中删除错误类。我在这里有这个奇怪的工作演示：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

你需要实现unhighlight

// 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

jQuery验证popover：删除元素的样式类

1 个答案: