customize jQuery Validation message and markup

Question

I have the following form

<form id="myform" method="post" action="#">
    <div class="fields">
        <fieldset class="ui-widget ui-widget-content ui-corner-all">
            <legend class="ui-widget ui-widget-header ui-corner-all">&nbsp;Customer properties&nbsp;</legend>
            <input type="hidden" id="CustomerID" name="CustomerID"  value="${CustomerID}" />
            <br />
            <table width="100%" border="0" cellpadding="3" cellspacing="1">
            <tr valign="top">
                <td><label for="Code">Customer Code</label></td>
                <td><input type="text" id="Code" name="Code" value="${Code}" class="ui-widget-content" style="width:140px" /></td>
            </tr>
            <tr valign="top">
                <td><label for="CustomerName">Name</label></td>
                <td><textarea id="CustomerName" rows="2" cols="40" name="CustomerName" class="ui-widget-content">${CustomerName}</textarea></td>
            </tr>
            ...
            </table>
            <br />
        </fieldset>
    </div>
    <div style="text-align:right; padding: 8px 0px 0px 0px;">
        <input type="submit" id="btnSave" name="btnSave" class="button" value="Save" />
        <input type="button" id="btnCancel" name="btnCancel" class="button" value="Cancel" />
    </div>
</form>

on which I apply jQuery validation through the following code

$('#myform').validate({
    errorElement: 'span',
    errorPlacement: function (error, element) {
        error.html($('<img alt="" src="error.png" />').attr('title', error.html())).insertAfter(element);
    },
    rules: {
        ...
    },
    messages: {
        ...
    },
    submitHandler: function (form) {
        saveCustomer(form);
    }
});

This code works very nice the first time is being executed (when I press the submit button) and the image appear regularly immediately after the input text. Anyway when I tab to another edit the image disappear and I can see again the text around the edit. What I am doing wrong?

Answer 1

see here- you can use the errorElement option to create your custom error display,
invalidHandler method (I think) to disable the group messages part.
you can use errorPlacement to control how the error is displayed (untested example):

$("#myform").validate({
  errorPlacement: function(error, element) {
       element.append('<img source=".." title="' + error.text() +'" />');
   }
 })

this should create an image with a tooltip containing the error message.