jquery validate:为错误消息添加淡入/淡出效果
我想为jquery的validation中显示的错误消息添加淡入/淡出效果。 这样做的方法是什么? 我可以使用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); } });
我意识到这是一个非常古老的问题,但我无法在任何地方找到这个答案。 这是我最终使用的解决方案: http : //jsfiddle.net/MkARD/
我们的想法是覆盖处理显示和隐藏错误的函数,以使用SlideDown和SlideOut代替Show和Hide。 这也可以应用于FadeIn和FadeOut。 代码中似乎已经支持覆盖这些函数,但没有记录。
此外,我选择在输入聚焦时清除我的错误。 如果您希望在其他事件中清除错误,则必须找到依赖于哪个函数并在其中进行更改。
希望这有助于某人! 这些是我覆盖的function:
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(); }