jQuery验证:显示聚焦字段错误消息
jQuery验证:显示聚焦字段错误消息
提问于 2012-11-19 14:04:43
目标：我想在容器中显示聚焦字段错误消息。
我到目前为止做了什么，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label.pre {
display:inline-block;
width:60px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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 class="pre" for="entry_0">Name *</label>
<input type="text" class="required" name="name" id="entry_0">
</div>
<div>
<label class="pre" for="entry_1">Email *</label>
<input type="text" class="required email" name="email"
id="entry_1">
</div>
<div>
<label class="pre" for="entry_2">URL</label>
<input type="text" class="url" name="url" id="entry_2">
</div>
<div>
<textarea class="required" name="comment" id="entry_3" rows="7" cols="35"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>Demo：http://jsfiddle.net/RainLover/32hje/
问题
- 如果单击submit按钮，容器(Span)将显示第一个错误消息，无论哪个字段是焦点所在。
- 关注使用Tab键的字段很好( URL字段除外)，但是用鼠标聚焦并不能正确地更新span。
Stack Overflow用户
回答已采纳
发布于 2012-11-24 08:09:36
尤里卡!我只是重新检查了一下验证选项，发现我应该使用errorPlacement而不是showErrors。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label.pre {
display:inline-block;
width:60px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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."
},
errorPlacement: function (error, element) {
element.focus(function () {
$("span").html(error);
}).blur(function () {
$("span").html('');
});
}
});
});
</script>
</head>
<body>
<form action="#">
<span></span>
<div>
<label class="pre" for="entry_0">Name *</label>
<input type="text" class="required" name="name" id="entry_0">
</div>
<div>
<label class="pre" for="entry_1">Email *</label>
<input type="text" class="required email" name="email"
id="entry_1">
</div>
<div>
<label class="pre" for="entry_2">URL</label>
<input type="text" class="url" name="url" id="entry_2">
</div>
<div>
<textarea class="required" name="comment" id="entry_3" rows="7" cols="35"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13455419
复制相关文章
相似问题
腾讯云开发者
