添加工具提示样式错误消息时jquery验证错误放置问题

Question

我在这里关注了 Nadia 的精彩帖子 jQuery override default validation error message display (Css) Popup/Tooltip like而且效果很好。但是我正在处理的表单是通过ajax提交的，成功时会更新表单上方的表格。表格随着每次提交而增长，因此表单的位置在页面上向下滑动。 Nadia 的解决方案在调用 errorPlacement 函数时发布错误消息。问题是 errorPlacement 仅在第一次发生错误时被调用。当用户更正错误时，div 会被隐藏但不会被删除。因此，下次验证失败时，验证函数只会替换 div 包装器的 html。结果，绝对位置被关闭，因为它是相对于表修改之前的输入计算的。有人遇到过这个问题并有解决方法吗？下面是我正在使用的 errorplacement 函数，它直接来自 Nadia 在链接帖子中的解决方案。

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

不确定您是否遇到了与我相同的问题，但我过去使用过的一种巧妙的解决方案是删除 showErrors 事件处理程序中的错误。这会强制 jQuery.Validate 再次为每个错误调用 errorPlacement。

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