homepage Welcome to WebmasterWorld Guest from 107.21.135.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery validation: display the focused field error message
Rain_Lover




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

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>


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

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved