jquery validate: adding a fade in/out effect to error messages

Question

I\'d like to add a fade-in/fade-out effect to the error messages displayed on jquery\'s validate. What\'s the way to do this? Could I use a div and on them and work them separat

Answer 1

I realize this is a super old question but I couldn't find this answer anywhere. This was the solution I ended up using: http://jsfiddle.net/MkARD/

The idea was to overwrite the functions that handle showing and hiding errors to use SlideDown and SlideOut instead of Show and Hide. This could be applied to FadeIn and FadeOut as well. Overwriting these functions seems to already be supported in the code, but isn't documented.

Additionally, I chose to clear my errors when an input is focused. If you want your errors to clear on a different event, you will have to find which function that relies on and make the changes there instead.

Hopefully this helps someone! These are the functions I overwrote:

    onfocusin: function( element, event ) {
        this.lastActive = element;

        // hide error label and remove error class on focus if enabled
        if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
            if ( this.settings.unhighlight ) {
                this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
            }
            this.addWrapper(this.errorsFor(element)).slideUp();
        }
    },
    showErrors: function() {
        var i, elements;
        for ( i = 0; this.errorList[i]; i++ ) {
            var error = this.errorList[i];
            if ( this.settings.highlight ) {
                this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
            }
            this.showLabel( error.element, error.message );
        }
        if ( this.errorList.length ) {
            this.toShow = this.toShow.add( this.containers );
        }
        if ( this.settings.success ) {
            for ( i = 0; this.successList[i]; i++ ) {
                this.showLabel( this.successList[i] );
            }
        }
        if ( this.settings.unhighlight ) {
            for ( 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 ).slideDown();
    }