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=".6.4/jquery.min.js"
type="text/javascript"></script>
<script src=".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.",
ment: "Please enter your ment."
},
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="ment" id="entry_3" rows="7" cols="35"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>
Demo: /
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.
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./ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.aspnetcdn./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.",
ment: "Please enter your ment."
},
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="ment" id="entry_3" rows="7" cols="35"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>
Demo: http://jsfiddle/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.
- have u load the css.... and not sure why are u using span to display error..since jquery validation does that by itself.. it creates the error container (label.error), if there is any error – bipen Commented Nov 19, 2012 at 14:15
- @bipen: "not sure why are u using span to display error" To display only one error message -- the one related to the focused field. – Mori Commented Nov 19, 2012 at 14:20
3 Answers
Reset to default 1Eureka! I just re-checked the validate options and realized I should have used errorPlacement instead of showErrors:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label.pre {
display:inline-block;
width:60px;
}
</style>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.aspnetcdn./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.",
ment: "Please enter your ment."
},
errorPlacement: function (error, element) {
element.focus(function () {
$("span").html(error);
}).blur(function () {
$("span").html('');
});
}
});
});
</script>
</head>
<body>
<form action="#">
<span></span>
<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="ment" id="entry_3" rows="7" cols="35"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>
For problem number 1:
the container(span) shows the first error message, no matter which field was focused.
That's just because you had hard coded errorList[0].message to the span html
For problem number 2:
Focusing on fields using the Tab key works well, but focusing with a mouse doesn't update the span HTML correctly.
Here's a suggested variation of your code, it will give a running list of errors when you try to submit, or as you tab/click on/off fields it should show issue (if any), though the behavior varies slightly based on tabbing through or clicking, hope it helps or gets you on right track
$(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.",
ment: "Please enter your ment."
},
showErrors: function(errorMap, errorList) {
var msg = 'Errors: ';
$.each(errorList, function(){
msg += this.message + '<br />'; });
$("span").html(msg);
}
});
});
this fixes prob no. 2
$(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.",
ment: "Please enter your ment."
},
showErrors: function (errorMap, errorList) {
if (errorList.length) {
$("span").html(errorList[0].message);
}
}
});
$("form input").focus(function () {
$(this).valid();
});