jQuery验证:向错误消息添加淡入/淡出效果 [英] jquery validate: adding a fade in/out effect to error messages

问题描述

我想为jquery的validate上显示的错误消息添加淡入/淡出效果.这是怎么做的?我可以在它们上使用div并分别工作吗?插件是否包含此效果?

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

    });

推荐答案

我意识到这是一个非常古老的问题，但是我找不到任何答案.这是我最终使用的解决方案: http://jsfiddle.net/MkARD/

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/

这个想法是要覆盖处理显示和隐藏错误的函数，以使用SlideDown和SlideOut而不是Show and Hide.这也可以应用于FadeIn和FadeOut.似乎已经在代码中支持覆盖这些功能，但是没有记录.

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

这篇关于jQuery验证:向错误消息添加淡入/淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！