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。
回答 3
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用户
发布于 2012-11-19 15:00:00
关于问题1：
容器(Span)显示第一个错误消息，不管哪个字段被聚焦。
这仅仅是因为您将errorList[0].message硬编码到span。
关于问题2：
关注使用Tab键的字段很好，但是用鼠标聚焦并不能正确地更新span。
下面是您的代码的建议变体，当您尝试提交时，它将给出一个运行错误列表，或者当您在选项卡/单击/关闭字段时显示问题(如果有的话)，尽管行为因选项卡式或单击而略有不同，希望它有助于或使您走上正确的轨道
$(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);
}
});
});Stack Overflow用户
发布于 2012-11-20 14:08:59
这就修正了第二号问题。
$(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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13455419
复制相关文章
相似问题
腾讯云开发者
