如何將錯誤消息顯示爲工具提示？

我想顯示錯誤消息的提示如下圖所示的鏈接，但不工作的me.Please讓我知道會錯誤是什麼。我面臨的錯誤是工具提示錯誤消息，而不是顯示旁邊的元素，它顯示了一些在表外的地方。鏈接我follwed：如何將錯誤消息顯示爲工具提示？

jQuery override default validation error message display (Css) Popup/Tooltip like

我在這裏發佈我的代碼：

<table border="0" cellpadding="1" cellspacing="1" width="100%"> 
<tr> 
<td colspan="4">MAIN DETAILS 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Launch Number: 
</td> 
<td class="TCDetail_Item">[LaunchID] 
</td> 
<td class="TCDetail_Title"> 
</td> 
<td class="TCDetail_Item"> 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Client: 
</td> 
<td class="TCDetail_Item">[CustName] 
</td> 
<td class="TCDetail_Title">Job Number: 
</td> 
<td class="TCDetail_Item">[JobID]-[DashID] 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Supplier: 
</td> 
<td class="TCDetail_Item">[SuppName] 
</td> 
<td class="TCDetail_Title">Supplier Code: 
</td> 
<td class="TCDetail_Item">[SupplierID] 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Service Date: 
</td> 
<td class="TCDetail_Item"><input type="text" class="clr" size="8" name="frmServiceDate" id="frmServiceDate" value="[DateScheduled]" class="Sdate"> 
</td> 
<td class="TCDetail_Title">Activity: 
</td> 
<td class="TCDetail_Item"> 
<select name="frmActivityType" id="frmActivityType"> 
<option value='' selected=''>PleaseSelect..</option> 
<option value='1'>Inspect</option> 
<option value='2'>Audit</option> 
</select> 
</td> 
</tr> 
<tr> 
     <td colspan="4"> 
      <div class="buttons"> 
       <button onclick="checkall();">Submit Timecard</button> 
       <button>Cancel</button> 
      </div> 
     </td> 
</tr> 
</table>

jQuery腳本：

<script type="text/javascript"> 
$.validator.addMethod(
"Sdate", 
function (value, element) { 

var nowdate=new Date(); 
if(Date.parse(value) < Date.parse(nowdate)) 
return (Date.parse(value)); 

}, 
"Service Date should not be greater than todays Date." 
); 
$(document).ready(function(){ 

$("#Form").validate({ 
rules: 
{ 
frmActivityType : "required", 
frmServiceDate : 
{ 
required: true, 
date: true, 
Sdate:true 
} 
}, 
errorElement: "div", 
wrapper: "div", // a wrapper around the error message 
errorPlacement: function(error, element) { 
offset = element.offset(); 
error.insertAfter(element) 
error.addClass('message'); // add a class to the wrapper 
error.css('position', 'absolute'); 
error.css('left', offset.left + element.outerWidth()); 
error.css('top', offset.top); 
} 
}); 
}); 
</script>

和CSS樣式塊：

<style> 
div.message{ 
background: transparent url(msg_arrow.gif) no-repeat scroll left center; 
padding-left: 7px; 
} 

div.error{ 
background-color:#F3E6E6; 
border-color: #924949; 
border-style: solid solid solid none; 
border-width: 2px; 
padding: 5px; 
} 
</style>

由於事先 Sravanthi

來源

2011-12-28 Sravanthi

這個小提琴是否有同樣的問題？ http://jsfiddle.net/Vakp2/ – 2011-12-28 21:08:08

嘿安德魯，這就是我複製你的代碼，並在瀏覽器中使用，但它沒有顯示出來的錯誤信息元素 – Sravanthi 2011-12-28 21:38:26

旁邊，我注意到您的驗證腳本使用'

' ，但是你提供的標記不包含'form'元素。這只是一個錯字嗎？ – 2011-12-28 21:39:35

您可以使用jQuery UI API當前位置旁邊的元素位置的錯誤消息，

Link to JQuery UI Position API

希望它能幫助。

來源

2011-12-28 21:07:50

嘿感謝這爲我工作，我改變我的代碼偏移這樣它開始working.:errorElement：圍繞「格」，//包裝：「格」，包裝錯誤消息 errorPlacement：function（error，element）{offset} =「292 382」; （元素） error.addClass（'message'）; //向包裝中添加一個類 error.css（'position'，'absolute'）; error.css（'left'，offset.left + element.outerWidth（））; error.css（'top'，offset.top）; } – Sravanthi 2011-12-28 22:39:22

如何將錯誤消息顯示爲工具提示？

回答

相關問題