Question

我正在尝试将错误消息元素放在正在验证的FORM元素之外。我想将所有错误标签放在DOM的底部，并将它们更改为绝对位置。

errorPlacement: function(error, element) {

                if (element.hasClass('section')){
                    element = element.parent();
                }
                offset = element.offset();
                $('#val_errors').append(error);
                error.addClass('val-message');  // add a class to the wrapper
                error.css({'position':'absolute','z-index':'10'});
                error.css('left', offset.left + element.outerWidth());
                error.css('top', offset.top);

            }

我查过了与我的问题非常相似的其他帖子，但没有解决方案。 JQ validation plugin - error labels ( errorPlacement ) outside the form, is it possible?

请帮帮我

由于 VENU

Answer 1

VENU，这段代码适合我：

errorPlacement: function(error, element) {
    error.appendTo($("div#errorContainer"));
}

您已经将errorContainer设置为您想要的位置。您还可以使用普通的jQuery / CSS函数动态设置errorContainer：

errorPlacement: function(error, element) {
    error.appendTo($("div#errorContainer"));
    $("div#errorContainer").css({'position':'absolute','z-index':'10'});
    $("div#errorContainer").css('left', offset.left + element.outerWidth());
    $("div#errorContainer").css('top', offset.top);

}

似乎您每次都必须动态创建一个新的div错误容器，因为您根据抛出错误的元素进行浮动，并且可能会抛出多个错误。

因此，创建新浮动div的代码如下所示：

 errorPlacement: function(error, element) {
    $('body').append('<div id="error' + element.attr("id") + '" class="errorContainer"></div>');
    error.appendTo($('div#error' + element.attr("id")));
    offset = element.offset();

    $('div#error' + element.attr("id")).css({'position':'absolute','z-index':'10'});
    $('div#error' + element.attr("id")).css('left', offset.left + element.outerWidth());
    $('div#error' + element.attr("id")).css('top', offset.top);

}

然后要清除消息，您可以使用以下内容：

$("input").change(function() {
    $('div#error' + $(this).attr("id")).remove();
})

Answer 2

我遇到了同样的问题，因此我没有使用只能在表单中使用的errorPlacement函数，而是使用errorLabelContainer设置，并在表单外部使用div：< / p>

$("#my-form").validate({
    errorLabelContainer : "#div_outside_form"
});

现在我可以将我的消息放在我想要的任何地方，但不幸的是，与errorPlacement不同，我无法自定义每一个。所以我进入jquery.validate.js并查找错误标签所在的位置：它是版本1.9.0中的第652行

if ( !this.labelContainer.append(label).length )
    this.settings.errorPlacement
       ? this.settings.errorPlacement(label, $(element) )
       : label.insertAfter(element);

我用

替换了这些行

if ( this.labelContainer.append(label).length ){
    if (typeof(this.settings.labelCustomize)!='undefined')
        this.settings.labelCustomize(label,$(element));
}else{
        this.settings.errorPlacement
       ? this.settings.errorPlacement(label, $(element) )
       : label.insertAfter(element);
}

在名为labelCustomize的设置上添加一个挂钩。唯一剩下的就是在验证调用中定义这个函数：

$("#my-form").validate({
    errorLabelContainer : "#div_outside_form",
    labelCustomize : function(error, element) {
      var offset = element.offset();
      error.css("position","absolute")
         .css("top",offset.top)
         .css("left",offset.left-element.outerWidth());
    }
});

我只是尝试过，所以我对这种方法的可靠性没有信心，但它确实有效。

Answer 3

这里最好的答案是由@dendscie提供的，但它需要更改jQuery Validate源代码。如果没有这个，可以通过在jQuery Validate中使用defaultShowErrors函数并在showErrors选项中稍微修改它来实现它：

$('#my-form').validate({
    errorLabelContainer:'#div_outside_of_form',
    errorPlacement: function(error,element){
        //put the error absolutely positioned beside the element but
        //"floating" over any overflow:hidden divs/forms
        error.position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });
    },
    showErrors: function() {
        for ( var i = 0; this.errorList[i]; i++ ) {
            var error = this.errorList[i];
            this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
            this.showLabel( error.element, error.message );
            //This is the only line different than the defaultShowErrors the code is taken from
            this.settings.errorPlacement(this.errorsFor(error.element), $(error.element) );
        }
        if( this.errorList.length ) {
            this.toShow = this.toShow.add( this.containers );
        }
        if (this.settings.success) {
            for ( var i = 0; this.successList[i]; i++ ) {
                this.showLabel( this.successList[i] );
            }
        }
        if (this.settings.unhighlight) {
            for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
                this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
            }
        }
        this.toHide = this.toHide.not( this.toShow );
        this.hideErrors();
        this.addWrapper( this.toShow ).show();
    });

与一些使您的错误标签绝对定位的CSS结合使用：

                label.error {
                    background-color:white;
                    color:red;
                    position:absolute;
                    border: 1px black solid;
                    padding: 10px;
                    box-shadow: 5px 5px 2px #888;
                    z-index:1;
                }

在表单外部的Jquery验证错误放置，具有错误消息的绝对定位

3 个答案: