jQuery验证:显示焦点字段错误消息

本文介绍了jQuery验证:显示焦点字段错误消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目标:我想在容器中显示焦点突出的错误消息.

到目前为止我做了什么:

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 [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 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.

focused

jQuery验证:显示焦点字段错误消息

问题描述

推荐答案