CODEWITHSUNDEEP
jqueryjquery-validate
andandandand
andandandand

Reputation: 22270

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

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 separately? Does the plugin include this effect?

I'm using this code to place error messages (I need it for proper placing):

$("#commentForm2").validate({


        errorElement: "div",

        errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
        }

    });

Upvotes: 1

Views: 2306

Answers (1)

Cassie
Cassie

Reputation: 292

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

Upvotes: 1

Related Questions