Jquery validation error placement outside form with absolute positing of error message

I am trying to place the error message elements outside the FORM element which is being validated. I would like to place all the error labels at the bottom of the DOM and change them to absolute position.

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

            }

I have checked other post which is very similar to my question, But there is no solution. JQ validatio开发者_如何学Pythonn plugin - error labels ( errorPlacement ) outside the form, is it possible?

Please help me out

Thanks Venu

Venu, This code works for me:

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

Where you would already have the errorContainer already set to where you wanted it to be. You could also set the errorContainer on the fly using normal jQuery/CSS functions:

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

}

It appears that you would then have to create a new div error container on the fly each time, since you are floating based on the element that threw the error, and multiple errors could be thrown.

So, the code to create new floating divs would look like:

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

}

Then to clear messages, you could have something like:

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

I had the same problem, so instead of using the errorPlacement function which can only be used inside a form, i used the errorLabelContainer setting with a div outside my form :

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

Now I can put my message anywhere I want with css, but unfortunately, unlike errorPlacement, I cannot customize each one of them. So i went into the jquery.validate.js and looked for the place where the error label are positionned : it's line 652 in the version 1.9.0

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

I replaced those lines by

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

to add a hook on the settings called labelCustomize. The only thing left is to define this function in the validate call :

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

I just tried it so I'm not confident about the reliability of this method, but it works.

The best answer here was provided by @dendscie, but it required changing the jQuery Validate source code. There's a way to do it without that, by taking the defaultShowErrors function in jQuery Validate and slightly modifying it in your showErrors option:

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

Combine with some CSS that makes your error labels absolutely positioned:

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