personalizar el mensaje jQuery Validación y marcado

Question

Tengo el siguiente formulario

<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> 

sobre la que aplicar la validación de jQuery a través del siguiente código

$('#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); 
    } 
}); 

Este código funciona muy bien se está ejecutando la primera vez (cuando presiono el botón de enviar) y la imagen aparece regularmente inmediatamente después del texto de entrada. De todos modos, cuando selecciono otra edición, la imagen desaparece y puedo ver nuevamente el texto alrededor de la edición. ¿Que estoy haciendo mal?

Answer 1

ver here - se puede utilizar la opción errorElement para crear la pantalla de error personalizado,
método invalidHandler (creo) para desactivar la parte mensajes de grupo.
puede utilizar errorPlacement para controlar cómo se muestra el error (ejemplo no probado):

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

esto debe crear una imagen con un texto de ayuda que contiene el mensaje de error.