定製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() +'" />'); 
    } 
}) 

這應該與包含錯誤消息的工具提示創建一個圖像。