定制jQuery验证消息和标记

Question

我有以下形式

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

上，我运用jQuery验证通过下面的代码

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

此代码的工作非常漂亮正在执行第一次（当我按下提交按钮时），图像在输入文本后立即出现。无论如何，当我标签到另一个编辑图像消失，我可以再次看到编辑周围的文字。我做错了什么？

Answer 1

看到here - 您可以使用errorElement选项来创建自定义错误显示，
invalidHandler方法（我认为）禁用组消息的一部分。
可以使用errorPlacement来控制如何显示错误（未测试实施例）：

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

这应该与包含错误消息的工具提示创建一个图像。