jQuery Validation Plugin: Show my own errors with images in "errorPlacement" option

Question

I am using jquery validation plugin. I am using the following function to display default error messages in next td(column) of the element of table.

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


 errorElement: "div",
            wrapper: "div",

 errorPlacement: function(error, element) { 
        error.appendTo( element.parent().next() );
 }

 });

This function is showing default messages but I want to display my own error messages.

For example I want this:

<img id='error' src='images/crosssign.gif' />")Please fill this field.

instead of:

"This field is required."

Thanks in advance.

Answer 1

You can create messages for the fields that you are validating. From the jquery site:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

Answer 2

I asked the same type of question a while back, here is the thread

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?