2
rated 0 times
[
9]
[
7]
/ answers: 1 / hits: 21637
/ 12 Years ago, mon, november 19, 2012, 12:00:00
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.pre {
display:inline-block;
width:60px;
}
</style>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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 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>
Demo: http://jsfiddle.net/RainLover/32hje/
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.
More From » jquery
