Rain Lover Posted November 19, 2012 Share Posted November 19, 2012 (edited) 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: 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. Edited November 20, 2012 by Rain Lover Link to comment Share on other sites More sharing options...
justsomeguy Posted November 19, 2012 Share Posted November 19, 2012 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 More sharing options...
Rain Lover Posted November 19, 2012 Author Share Posted November 19, 2012 You're only telling it to display the first error Thanks for the answer! Do you know how I can display the focused field error? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 19, 2012 Share Posted November 19, 2012 If errorList is an array, then you can loop through that to get all of the messages. It's hard to say more without knowing the structure of that array. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now