jquery validation errorPlacement issue when adding tooltip style error message

Question

I followed the excellent post by Nadia here jQuery override default validation error message display (Css) Popup/Tooltip like and it works great. But the form i am working on is submitted via ajax and a table above the form is updated when succesful The table grows with each submit and the position of the form slides down on the page as a result. Nadia's solution postions the error message when the errorPlacement function is called. The problem is that errorPlacement is only called the 1st time an error occurs. When the user corrects the error the div is hidden but not removed. So the next time there is a validation failure the validate function only replaces the html of the div wrapper. As a result the absolute position is off because it was calculated relative to the input before the table was modified. Has anyone run into this and have a workaround? Below is the errorplacement function that i am using which is straight out of Nadia's solution in the linked post.

errorPlacement: function(error, element) {
                    offset = element.offset();
                    error.insertBefore(element)
                    error.addClass('message');  // add a class to the wrapper
                    error.css('position', 'absolute');
                    error.css('left', offset.left + element.outerWidth());
                    error.css('top', offset.top);
                }

Boycs · Accepted Answer · 2010-10-06 23:08:50Z

7

Not sure if you were facing the same issue I had or not, but one hacky solution that I have used in the past is to remove the errors in the showErrors event handler. This forces jQuery.Validate to call errorPlacement for each error once again.

    showErrors: function (errorMap, errorList) {
        for (var i = 0; errorList[i]; i++) {
            var element = this.errorList[i].element;
            this.errorsFor(element).remove();
        }
        this.defaultShowErrors();
    }

answered Oct 6, 2010 at 23:08

Boycs

5,6782 gold badges31 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

metamagikum Over a year ago

I missed a method that would be called everytime a validation is triggered. This workaround made my day. Nice! Thank you!

Collectives™ on Stack Overflow

jquery validation errorPlacement issue when adding tooltip style error message

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related