Question

我想为jquery的验证中显示的错误消息添加淡入/淡出效果。这样做的方法是什么？我可以使用div并在它们上面单独使用它们吗？插件是否包含此效果？

我正在使用此代码发出错误消息（我需要它才能正确放置）：

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

    });

Answer 1

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

我们的想法是覆盖处理显示和隐藏错误的函数，以使用SlideDown和SlideOut代替Show和Hide。这也可以应用于FadeIn和FadeOut。代码中似乎已经支持覆盖这些函数，但没有记录。

此外，我选择在输入聚焦时清除我的错误。如果您希望在其他事件中清除错误，则必须找到依赖的函数并在其中进行更改。

希望这有助于某人！这些是我覆盖的功能：

    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 validate：为错误消息添加淡入/淡出效果

1 个答案: