jQuery驗證與消息

我想在SELECT語句中添加驗證，當有人嘗試提交在選擇仍顯示「請選擇一個時區」：jQuery驗證與消息

<form id="timezoneform" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST"> 

    <select name="DropDownTimezone" id="DropDownTimezone" class="required"> 
     <option selected="" name="timezone_selector" value="" style="font-style:italic">Please select a timezone</option> 
     <option value="Pacific/Midway">Pacific/Midway (GMT -11:00)</option> 
     .... 
     </select> 
    <input type="submit" id="changetimezone" name="changetimezone" value="Change timezone" /> 
</form>

我試圖提供相同的驗證是我使用的文本框，但我想這是不一樣的：

<head> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
var js = jQuery.noConflict(); 
js("#changetimezone").click(function() { 
js("#timezoneform").validate({ 
    rules: { 
     timezone_selector: { 
      required: true 
     } 
    }, 
    messages: { 
     timezone_selector: { 
      required: "You must select a timezone" 
     } 
    } 

}); 
}); 
</script> 
</head>

我怎樣才能得到類似的消息出現如validate()確實爲文本框select語句。我看過這樣的帖子，但我仍然沒有運氣。提前致謝。

來源

2012-01-04 Tom

似乎做工精細這裏：http://jsfiddle.net/7atKS/ – 2012-01-04 01:43:34

奇怪......不知道爲什麼它不在我的網頁上工作... – Tom 2012-01-04 01:53:44

嗯，我有一些想法，但由於某種原因，我無法讓消息正確顯示。 – 2012-01-04 01:59:55

你的表格需要一些調整：

<form id="timezoneform" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST"> 

    <select name="DropDownTimezone" id="DropDownTimezone"> 
     <option selected="" name="timezone_selector" value="" style="font-style:italic">Please select a timezone</option> 
     <option value="Pacific/Midway">Pacific/Midway (GMT -11:00)</option> 
     .... 
     </select> 
    <input type="submit" id="changetimezone" name="changetimezone" value="Change timezone" /> 
</form>

特別要注意：

的option元素應該不會有name屬性，且validate插件不應該針對option元素。
如果您要在JavaScript中定義規則，您也不需要上的class='required'。
最後，您不需要在click處理程序中調用validate。您可以在表格準備好後立即定義它（js(document).ready(function() { ... });）。

總結：

var js = jQuery.noConflict(); 
js(document).ready(function() { 
    js("#timezoneform").validate({ 
     rules: { 
      DropDownTimezone: { 
       required: true 
      } 
     }, 
     messages: { 
      DropDownTimezone: { 
       required: "You must select a timezone" 
      } 
     } 

    }); 
});

例子：http://jsfiddle.net/ALUQB/

來源

2012-01-04 02:04:05

哦，親愛的，我不能相信我忘了'js（document）.ready（function（）{...}）;'。謝謝！只需要弄清楚這個css就可以把信息放在正確的位置。 – Tom 2012-01-04 02:15:28

@TomPepernic：很高興幫助！我唯一無法弄清楚的是如何讓自定義信息**「請選擇一個時區」**來顯示。這實際上可能是jQuery驗證中的一個錯誤。我會做更多的挖掘 – 2012-01-04 02:17:23

@TomPepernic：哎呀，只是想通了。查看我的更新。 – 2012-01-04 02:18:26

需要，要求select列表不是選項值。

<script type="text/javascript"> 
var js = jQuery.noConflict(); 
js("#changetimezone").click(function() { 
js("#timezoneform").validate({ 
    rules: { 
     DropDownTimezone: { 
      required: true 
     } 
    }, 
    messages: { 
     DropDownTimezone: { 
      required: "You must select a timezone" 
     } 
    } 

}); 
}); 
</script>

這是可行的，因爲您在timezone_selector上的值設置爲空字符串。它現在會給你正確的錯誤信息。如果您需要安置的面貌邁向errorPlacement，errorContainer幫助，並在這裏發現errorElement選項jQuery Validate Options

來源

2012-01-04 02:14:52 Brombomb

jQuery驗證與消息

回答

相關問題