2

我试图将错误消息元素放在正在验证的 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 验证插件 - 表单外的错误标签（errorPlacement），可能吗？

请帮帮我

谢谢金星

4

3 回答 3

3

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();
})
于 2011-07-01T15:23:05.090 回答
2

我遇到了同样的问题，所以我没有使用errorPlacement只能在表单内部使用的功能，而是在表单外部使用了errorLabelContainer设置div：

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

现在我可以使用 css 将我的消息放在我想要的任何地方，但不幸的是，与 不同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. 唯一剩下的就是在 validate 调用中定义这个函数：

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

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

于 2012-02-16T18:03:05.333 回答
0

@denscie 提供了最佳答案，但它需要更改 jQuery Validate 源代码。有一种方法可以做到这一点，方法是采用defaultShowErrorsjQuery Validate 中的函数并在您的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;
                }
于 2013-03-19T16:14:42.180 回答