Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQuery validation: display the focused field error message

1:51 pm on Nov 19, 2012 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 205
votes: 0

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

What I've done so far:

<!DOCTYPE html>
<style type="text/css">
label {display:inline-block; width:60px;}
<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">
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) {
<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>

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