jQuery validation: display the focused field error message

**Rain Lover** · 11-19-2012, 01:30 PM

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>

Demo: http://dl.dropbox.com/u/4017788/Labs/sample-form.html

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.

**Beverleyh** · 11-19-2012, 02:42 PM

Sorry, I'm personally not familiar with the jQuery validation plugin or its usage requirements/documentation. I'm assuming its an external-to-DD-script?

I was just about to ask you for a link to the plugin and your own page, but following a quick serch on "jquery.validate", I found that you'd posted your question on the jQuery help forums too: http://forum.jquery.com/topic/jquery...-error-message

I think that's probably the best place to ask for an answer - at the source rather than asking for generic help from the DD forum.

**jscheuer1** · 11-19-2012, 06:19 PM

I was playing around with it just a little bit and found things improved a little just by updating to jQuery 1.6.4.

I'd suggest going to:

http://bassistance.de/jquery-plugins...in-validation/

and getting the latest version of the validator script (1.10 I think it is, you have 1.9), and running it with the latest version of jQuery (you have 1.6.1, it's up to 1.8.3).

You will also find there a link to the docs and other interesting things like working examples.

**Rain Lover** · 11-24-2012, 07:31 AM

Originally Posted by Beverleyh

I think that's probably the best place to ask for an answer - at the source rather than asking for generic help from the DD forum.

I'm afraid that forum isn't active and I haven't received any answers yet.

**Rain Lover** · 11-24-2012, 07:47 AM

Originally Posted by jscheuer1

I was playing around with it just a little bit and found things improved a little just by updating to jQuery 1.6.4.

I'd suggest going to:

http://bassistance.de/jquery-plugins...in-validation/

and getting the latest version of the validator script (1.10 I think it is, you have 1.9), and running it with the latest version of jQuery (you have 1.6.1, it's up to 1.8.3).

You will also find there a link to the docs and other interesting things like working examples.

Eureka! I just re-checked the validate options and realized I should have used errorPlacement instead of showErrors:

Code:

<!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.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."
   },
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>

I wonder what you think. Any revision/improvement, please?

**jscheuer1** · 11-24-2012, 12:03 PM

Like I said, update to all the latest versions of the scripts involved (the validation one and jQuery).

**Rain Lover** · 11-24-2012, 12:33 PM

Originally Posted by jscheuer1

Like I said, update to all the latest versions of the scripts involved (the validation one and jQuery).

Sure I will. Thanks for the pointers!

**jscheuer1** · 11-24-2012, 03:42 PM

Great. It's no guarantee but often later versions take care of bugs, so insofar as this might be a bug, updating might fix it.

Plus it allows us to both be working from the same set of docs that apply to the version at hand if we have to take this further.

Very often with jQuery plugins, if you have a decent grasp jQuery and how these things are generally authored, armed as well with the docs - if the thing can be made to do what you want it to do, one or more ways of getting there become apparent.