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验证与消息

回答

相关问题