Objective: I'd like to display the focused field error message in a container.

What I've done so far:

Code:
<!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 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 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>
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, but focusing with a mouse doesn't update the span HTML correctly.