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

Answer 1

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();
    }