Jump to content

jQuery validation: display the focused field error message


Rain Lover
 Share

Recommended Posts

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 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.co...ample-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.

Edited by Rain Lover
Link to comment
Share on other sites

You're only telling it to display the first error: $("span").html(errorList[0].message);

Focusing on fields using the Tab key works well, but focusing with a mouse doesn't update the span HTML correctly.
Since I don't see where you're adding focus event handlers in that code, I assume that's a problem in jQuery or the plugin.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...