2013-05-16 31 views
1

如果驗證失敗,我使用jQuery驗證來生成自定義消息。 默認情況下,消息位於正在驗證的輸入字段的右側。 我希望此消息總是位於字段標題的右側。如何將jQuery驗證文本放置在標題的右側而不是輸入字段的右側

舉例來說,我希望它看起來像這樣: http://jsfiddle.net/zWgbP/

我已經加入玩耍了:

errorPlacement: function (error, element) { 
      error.insertBefore(element);  
     }, 

...但是,這是不完全正確,因爲我需要它在名字「Last Name」之後的休息之前。

有沒有更好的方法來定位字段標題,如果我把它放在一個span或div中,並使用jQuery方法給它一個id我下面?

如果沒有,是否有更好的方法?

JavaScript的

$(document).ready(function() { 

// validate signup form on keyup and submit 
$("#newform").validate( 

    rules: { 
     lastname: { 
      required: true, 
      minlength: 2    
     }, 

    messages: { 
     lastname: { 
      required: "* please fix", 
      minlength: "* please fix" 
     }, 

的HTML

<form name="newform" id="newform" method="post" onsubmit="return OnNewButton();"> 

<input type='text' id='lastname' name='lastname' size='20' value = "" /> 

</form> 

的CSS

<style type="text/css"> 
#newform label.error { 
color: red; 
font-size: 15px; 
} 
</style> 
+3

'errorPlacement'似乎是正確的解決方案,您只需要弄清楚正確的關係。您的HTML不包含輸入字段的標籤,因此很難說明它應該是什麼。 – Barmar

+1

Barmar是正確的,檢查一些更多信息的選項頁面http://docs.jquery.com/Plugins/Validation/validate#toptions – Jerryf

+0

謝謝:看起來像appendTo選項是我所需要的。 $( 「#myForm的」)來驗證({ errorPlacement:功能(錯誤,元素){ error.appendTo(element.parent( 「TD」)下( 「TD」));} , 調試:真 }) – Chain

回答

0

答案是添加以下errorPlacment選項在我的jQuery:

errorPlacement: function(error, element) { 
    error.appendTo('#title-' + element.attr('id')); 
},  

我然後改變了這一:

Last Name<br /> 

<span id="title-lastname">Last Name</span><br /> 

的提交被驗證爲 「姓」 的ID。

這樣做的附加我的錯誤消息到中斷之前的範圍br完美。

謝謝你幫助大家。

相關問題