Размещение ошибки проверки Jquery вне формы с абсолютным положением сообщения об ошибке

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 - возможно ли указание на ошибки (errorPlacement) вне формы?

Пожалуйста, помогите мне

Спасибо Venu

Answer 1

Venu, этот код работает для меня:

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

Там, где вы уже установили errorContainer на то место, где вы его хотели.Вы также можете установить errorContainer на лету, используя обычные функции jQuery / CSS:

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 будет выглядеть так:есть что-то вроде:

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

Answer 2

У меня была та же проблема, поэтому вместо использования функции errorPlacement, которую можно использовать только внутри формы, я использовал настройку errorLabelContainer с div вне формы:

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

Теперь я могу разместить свое сообщение в любом месте с помощью css, но, к сожалению, в отличие от errorPlacement, я не могу настроить каждое из них.Поэтому я вошел в jquery.validate.js и искал место, где расположена метка ошибки: это строка 652 в версии 1.9.0

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

Я только что попробовал, поэтому не уверен в надежности этого метода, но он работает.

Answer 3

Лучший ответ здесь дал @dendscie, но для этого потребовалось изменить исходный код jQuery Validate.Есть способ сделать это без этого, взяв функцию defaultShowErrors в jQuery 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;
                }