CODEWITHSUNDEEP
jqueryjquery-validatejquery-animate
Sheixt
Sheixt

Reputation: 2626

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 label. Is is possible? If so how?

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

Thanks in advance!!!

Upvotes: 2

Views: 4120

Answers (2)

Igor Lizunov
Igor Lizunov

Reputation: 549

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

Upvotes: 5

AR.
AR.

Reputation: 1955

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

});

Upvotes: 2

Related Questions