How can I animate the error label with jquery validation plugin

This seems like a very simple question, but I think hours of staring at code has made me struggle to find a solution

I'm using the jQuery Validation plug-in & I want animate the display of the error labe开发者_如何学JAVAl. Is is possible? If so how?

I have had a look around but the solution appears to be alluding me!

Thanks in advance!!!

Previous answer is not fully correct.

The errorPlacement function is called only once for each error. If you toggle this error on and off - jquery.validate calls just hide and show and highlight and unhighlight.

So you need two additions:

Firstly add animation to highlight option:

 highlight: function (element, errorClass, validClass) {
    $(element).parent().find('.help-block') //your error placement
       .slideDown(300); //animation
 }

Secondly, if you want animation for hide message, you can't use 'unhighlight' and 'slideUp', because jquery.validate directly calls 'hide' before you animation completes.

So you need override standard jquery.validate logic:

jQuery.validator.prototype.hideErrors = function() {
     this.addWrapper( this.toHide ).slideUp(300);
}

Example:

$("#yourform").validate({
rules: {  

Your rules

 },
 messages:{

Your messages

 },
 errorPlacement: function(error, element){
 if ( element.is(":radio") || element.is(":checkbox")){
error.insertAfter(element.parent()).animate({opacity: 0.25, left: '+=50'});
} else { 
error.insertAfter(element).animate({opacity: 0.25, left: '+=50'});
}
   }

});