0

Currently I am working on web application which is going to have multi-step forms. I am validating each part of the form by jquery validate plugin. Also I wanted validation messages as a pop over. For this I have used jquery validate popover plugin. Both libraries are serving my purpose. But I am facing a problem which is little bit weird.

For required fields I wanted input box in red border on blur event. And when input is right I wanted to remove that error class from div element's style. I have this thing working here: 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'
        });
})

When I added validate pop over plugin everything is going good except the removal of error class from the style of input box. I don't know why jquery is not able to remove error class from the style of div element. I have this weird working demo here: 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'
        });
})

I am not able to figure out why this is happening. Is there anything breaking inside validate popover plugin?

4

1 回答 1

1

You need to implement 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'
    });
})

Demo: plunker

于 2014-09-29T07:10:58.690 回答