Add validation image for success/fail

Question

I am using jQuery Tools validator and I would like to add a simple green checkmark img (http://p.yusukekamiyamane.com/) once any of the fields pass validation and, onsubmit add a simple cross img and red border for ones that fail validation.

Right now, I just have the red border along with the standard error message. Can't figure out how to remove the error message and replace it with a green check or red cross img:

http://jsfiddle.net/rD44z/

I think I need to use onSuccess but can't seem to figure out how to put in/toggle the images. Any help would be great.

Answer 1

You can use the success option and set a class on the label that would decorate it with an image.

.validate({
  success: function(label) {
     label.addClass('valid');
  }
});