Menu
Community /Pin to ProfileBookmark[*]
[/LIST]
jQuery validation: display the focused field error message
[B]Objective
[B]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 [email protected].”
},
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>
[B]Problems
[LIST=1][*]
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.
Sign in
to post a comment