jQuery validation plugin: How to call a function when a field is validated.

Question

In this function I am displaying an error image in next td of table when a field is not validated. It is displaying error images correctly but when a field is valided, it's error image is not removed from next td. I tried to use "success" option but it is not working. Can anyone tell me the exact code.

$(obj).find("form").validate({

 showErrors: function(errorMap, errorList) {
  for ( key in errorMap ) {
    $('#' + key).parent().next().html("<img id='exclamation' src='images/exclamation.gif' />");
  }
 }

});

Answer 1

Create a function that removes all error images. Call it at the beginning of both the success and showErrors methods.

Answer 2

You might want to look at the errorPlacement option.

see the Remember the milk demo

from there:

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

customise it in order to place your error message in the right place (the adjacent td)

Answer 3

After a time I got my answer. Infact I want to display an image with a callout(containing error) in next column(td) of input field that is not validated by validation plugin. And when an input field is validated, this error image should be removed with its callout on it.

Here is my solution.

$("form").validate({

 errorPlacement: function(error, element) {

  //There should be an error
  if(error.html() != ''){   

   element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({
    width  : 200,
    cornerRadius : 8,
    className : "validationCallout",
    content  : error,
    align  : "left",
    nudgeHorizontal : -14,
    nudgeVertical : 4,
    arrowHeight : 6
   });  
  }
 },

 success: function( label ) {
  $(obj).find(".valid").parent().next().html("");   //remove error image from next column(td) of input containing "valid" class
  $(obj).find(".valid").parent().next().closeCallout(); //remove callout on error image from next column(td) of input containing "valid" class
 }

});

This code may be complex but it is working for me now. A callout plugin is used here that is not related to the question but may help anyother. Can anyone make it more simple?