jQuery Validation Plugin: Show your error message/image in next column(td) of table.

Question

I am using jquery validation plugin and zend framework. I have my form in a table. I am displaying an image as an error when a textfield is not validated. The error image is displayed very next to textbox in the same td of table. But I want to show error message/image in next td of same tr.

For example this is before submit:

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td></td></tr></table>

I want this after submit with empty field:

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td><img id='exclamation' src='images/exclamation.gif' title='This field is required.' /></td></tr></table>

I am using this js function for now:

$(obj).find("input.required").each(function(){
   $(this).rules("add", {
         required: true,
         minlength: 2,

         messages: {

                 required : "<img id='exclamation' src='images/exclamation.gif' title='This field is required.' />",
                 minlength: "<img id='exclamation' src='images/exclamation.gif' title='At least 2 characters.' />"

         }
   });
});

Answer 1

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?