jQuery验证:显示焦点字段错误消息 [英] jQuery validation: display the focused field error message
问题描述
目标:我想在容器中显示焦点突出的错误消息.
到目前为止我做了什么:
Objective: I''d like to display the focused field error message in a container.
What I''ve done so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label {display:inline-block; width:60px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").validate({
messages: {
name: "Please specify your name.",
email: {
required: "We need your email address to contact you.",
email: "Your email address must be in the format of name@domain.com."
},
url: "A valid URL, please.",
comment: "Please enter your comment."
},
showErrors: function(errorMap, errorList) {
if(errorList.length) {
$("span").html(errorList[0].message);
}
}
});
});
</script>
</head>
<body>
<span></span>
<form action="#">
<div><label for="entry_0">Name *</label><input type="text" class="required" name="name" id="entry_0"></div>
<div><label for="entry_1">Email *</label><input type="text" class="required email" name="email" id="entry_1"></div>
<div><label for="entry_2">URL</label><input type="text" class="url" name="url" id="entry_2"></div>
<div><textarea class="required" name="comment" rows="7" cols="35"></textarea></div>
<div><input type="submit" name="submit" value="Submit"></div>
</form>
</body>
</html>
演示: http://dl.dropbox.com/u/4017788 /Labs/sample-form.html [ ^ ]
问题:
1.如果单击提交"按钮，则无论焦点集中在哪个字段上，容器都会显示第一条错误消息.
2.使用Tab键聚焦字段效果很好(URL字段除外)，但是用鼠标聚焦不能正确更新范围HTML.
Demo: http://dl.dropbox.com/u/4017788/Labs/sample-form.html[^]
Problems:
1. If you click the submit button, the container(span) shows the first error message, no matter which field was focused.
2. Focusing on fields using the Tab key works well (except on the URL field), but focusing with a mouse doesn''t update the span HTML correctly.
推荐答案
(document).ready(function(){
(document).ready(function(){
("form").validate({ 讯息:{ 名称:请指定您的姓名."， 电子邮件: { 必填:我们需要您的电子邮件地址才能与您联系."， 电子邮件:您的电子邮件地址必须为name@domain.com的格式." }， url:请输入有效的URL."， 评论:请输入您的评论." }， showErrors:function(errorMap，errorList){ if(errorList.length){
("form").validate({ messages: { name: "Please specify your name.", email: { required: "We need your email address to contact you.", email: "Your email address must be in the format of name@domain.com." }, url: "A valid URL, please.", comment: "Please enter your comment." }, showErrors: function(errorMap, errorList) { if(errorList.length) {
("span").html(errorList [0] .message); } } }); }); < /script > < /head > < 正文 > < span > < /span > < 表单 =" < div > < 标签 =" entry_0" > ; 名称* < /label > ; < 输入 类型 =" class =" 名称 =" =" entry_0" > < /div > ; < div > < 标签 =" entry_1" > ; 电子邮件* < /label > ; < 输入 类型 =" class =" 名称="=" entry_1" < > < div > < 标签 =" entry_2" > ; URL < /label > < 输入 类型 =" class =" url" 名称 url" id =" >> < /div > < div > < 文本区域 =" 必填" 名称 =" 行 =" cols =" > >< /textarea > /div < div > < 输入 =" 提交" 名称 =" 值 =" < > < /form > < /body > < /html >
("span").html(errorList[0].message); } } }); }); </script> </head> <body> <span></span> <form action="#"> <div><label for="entry_0">Name *</label><input type="text" class="required" name="name" id="entry_0"></div> <div><label for="entry_1">Email *</label><input type="text" class="required email" name="email" id="entry_1"></div> <div><label for="entry_2">URL</label><input type="text" class="url" name="url" id="entry_2"></div> <div><textarea class="required" name="comment" rows="7" cols="35"></textarea></div> <div><input type="submit" name="submit" value="Submit"></div> </form> </body> </html>
演示: http://dl.dropbox.com/u/4017788 /Labs/sample-form.html [ ^ ]
问题:
1.如果单击提交"按钮，则无论焦点集中在哪个字段上，容器都会显示第一条错误消息.
2.使用Tab键聚焦字段效果很好(URL字段除外)，但是用鼠标聚焦不能正确更新范围HTML.
Demo: http://dl.dropbox.com/u/4017788/Labs/sample-form.html[^]
Problems:
1. If you click the submit button, the container(span) shows the first error message, no matter which field was focused.
2. Focusing on fields using the Tab key works well (except on the URL field), but focusing with a mouse doesn''t update the span HTML correctly.
这篇关于jQuery验证:显示焦点字段错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
