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.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/ 演示 ： http : //jsfiddle.net/RainLover/32hje/
Problems : 问题 ：
- If you click the submit button, the container(span) shows the first error message, no matter which field was focused. 如果您单击“提交”按钮，则无论焦点集中在哪个字段上，容器都会显示第一条错误消息。
- 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. 使用Tab键将焦点放在字段上效果很好（URL字段除外），但是用鼠标焦点无法正确更新范围HTML。
3 个解决方案
解决方案1
1 已采纳 2012-11-24 08:09:36
Eureka! 找到了！ I just re-checked the validate options and realized I should have used errorPlacement instead of showErrors : 我只是重新检查了validate选项 ，意识到我应该使用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>
解决方案2
0 2012-11-19 15:00:00
For problem number 1: 对于问题1：
the container(span) shows the first error message, no matter which field was focused.
That's just because you had hard coded errorList[0].message to the span html 那只是因为您有将errorList[0].message硬编码为span html
For problem number 2: 对于问题2：
Focusing on fields using the Tab key works well, but focusing with a mouse doesn't update the span HTML correctly.
Here's a suggested variation of your code, it will give a running list of errors when you try to submit, or as you tab/click on/off fields it should show issue (if any), though the behavior varies slightly based on tabbing through or clicking, hope it helps or gets you on right track 这是建议的代码变体，当您尝试提交时，它将提供错误的运行清单，或者当您单击/单击开/关字段时，它应该显示问题（如果有），尽管行为会因按以下方式略有不同或单击，希望它有助于或使您走上正轨
$(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) {
var msg = 'Errors: ';
$.each(errorList, function(){
msg += this.message + '<br />'; });
$("span").html(msg);
}
});
});
解决方案3
0 2012-11-20 14:08:59
this fixes prob no. 这修复了问题编号。 2 2
$(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);
}
}
});
$("form input").focus(function () {
$(this).valid();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.