title: customize jQuery Validation message and markup
body: <p>I have the following form </p>
  
  <pre><code>&lt;form id="myform" method="post" action="#"&gt;
      &lt;div class="fields"&gt;
          &lt;fieldset class="ui-widget ui-widget-content ui-corner-all"&gt;
              &lt;legend class="ui-widget ui-widget-header ui-corner-all"&gt;&amp;nbsp;Customer properties&amp;nbsp;&lt;/legend&gt;
              &lt;input type="hidden" id="CustomerID" name="CustomerID"  value="${CustomerID}" /&gt;
              &lt;br /&gt;
              &lt;table width="100%" border="0" cellpadding="3" cellspacing="1"&gt;
              &lt;tr valign="top"&gt;
                  &lt;td&gt;&lt;label for="Code"&gt;Customer Code&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="Code" name="Code" value="${Code}" class="ui-widget-content" style="width:140px" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr valign="top"&gt;
                  &lt;td&gt;&lt;label for="CustomerName"&gt;Name&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;textarea id="CustomerName" rows="2" cols="40" name="CustomerName" class="ui-widget-content"&gt;${CustomerName}&lt;/textarea&gt;&lt;/td&gt;
              &lt;/tr&gt;
              ...
              &lt;/table&gt;
              &lt;br /&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;div style="text-align:right; padding: 8px 0px 0px 0px;"&gt;
          &lt;input type="submit" id="btnSave" name="btnSave" class="button" value="Save" /&gt;
          &lt;input type="button" id="btnCancel" name="btnCancel" class="button" value="Cancel" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>on which I apply jQuery validation through the following code</p>
  
  <pre><code>$('#myform').validate({
      errorElement: 'span',
      errorPlacement: function (error, element) {
          error.html($('&lt;img alt="" src="error.png" /&gt;').attr('title', error.html())).insertAfter(element);
      },
      rules: {
          ...
      },
      messages: {
          ...
      },
      submitHandler: function (form) {
          saveCustomer(form);
      }
  });
  </code></pre>
  
  <p>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?</p>