Question

我正在尝试将errorPlacement与jquery的Validator插件一起使用，但我遇到了偏移问题。如果元素在验证时被隐藏（在不同的选项卡中），则偏移量返回值0,0（屏幕的左上角）。

$(document).ready(function() {

var tabs = $("#tabs").tabs();

var validator = $("#myForm").validate({

        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.position();
            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

这：“我发现的问题是（至少从我读到的内容），我不能多次调用验证。”其实不是真的。您可以随时通过javascript代码手动触发表单验证，只需一点技巧，您甚至可以指定应验证表单的哪一部分。

假设：

你有一个标签表格，
标签用div包裹
隐藏标签有css类“无效”，可见标签有css类“active”
您的表单上有前进和后退按钮，可以在选项卡中导航

我会做这样的事情：

$(document).ready(function() {

    var validator = $("#myForm").validate({
            ... // your settings
            ignore : ['#tabs .inactive input'] // tells the validator to only validate elements on your current tab
        });
    }


    $(".forward").click(function() {
        if (validator.form()) {  // triggers validation of the currently visible form inputs
                // step forward to the next tab
        }
    });
});

另外，如果您正在寻找切割'解决方案'，请查看此多步骤表单验证示例：http://jquery.bassistance.de/validate/demo/multipart/

jquery验证器errorPlacement偏移问题

1 个答案: