javascript jQuery 验证：显示焦点字段错误信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13455419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validation: display the focused field error message
提问by Mori
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 [email protected]."
},
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。
采纳答案by Mori
Eureka! I just re-checked the validate optionsand realized I should have used errorPlacementinstead of showErrors:
尤里卡！我只是重新检查了验证选项并意识到我应该使用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 [email protected]."
},
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>
回答by curtisk
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].messageto 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.
使用 Tab 键聚焦字段效果很好，但使用鼠标聚焦不会正确更新跨度 HTML。
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
这是您的代码的建议变体，当您尝试提交时，它会给出一个运行错误列表，或者当您使用 Tab/单击打开/关闭字段时，它应该显示问题（如果有），尽管行为会因使用 Tab 键而略有不同或点击，希望它有助于或让你走上正轨
$(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 [email protected]."
},
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);
}
});
});
回答by Dr Blowhard
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 [email protected]."
},
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();
});
