jQuery validate using custom div and css - css

Question

I have a div that I want login error messages to go into:
<div id="loginMessage" class="blankBox"> </div>
When there are validation errors, I want the class of this div to be 'errorBox'. When there are no validation errors, I want the css to be 'blankBox'.
And I have the following jQuery validation:
<script>
$(function() {
$("#loginForm").validate({
rules: {
username: "required",
password: "required"
},
messages: {
username: "Please enter a username",
password: "Please enter a password",
},
errorLabelContainer: "#loginMessage",
wrapper: "li",
highlight: function(element) {
$(element).addClass('errorBox');
},
unhighlight: function(element) {
$(element).removeClass('errorBox');
},
});
});
</script>
Unfortunately, what's happening is that the errorBox css is being applied to the input fields. ?!? I cannot get this to work.
Any ideas?

Answer 1

Based on your comment from another answer:
"I want the css to be neutral until errors appear in it, and then reset
to neutral when errors leave it."
I have no idea what "neutral" means, but by default when all errors leave the container, the plugin makes the container "hidden". In other words, all that matters is the style of the container when it contains errors since it's only going to be seen when there are errors inside of it. Otherwise, it's simply hidden. To achieve this initial state, set the style to display: none;. You may also set your other properties for when it will be seen with errors. (refer to the jsFiddle example).
Despite the other answers, errorPlacement is no good in this scenario. It's only used for placing the individual messages. It has nothing to do with the messages inside the error container.
I also removed your highlight and unhighlight callback functions as those are fired off on a field-by-field basis and also would have nothing to do with your error container. (You've also broken their default functionality by over-riding them with your own functions.)
DEMO: http://jsfiddle.net/6dCB7/
jQuery:
$(document).ready(function () {
$('#loginForm').validate({ // initialize the plugin
errorLabelContainer: "#loginMessage",
wrapper: "li",
rules: {
// your rules
}
});
});
HTML:
<div id="loginMessage"></div>
<form id="loginForm">
....
</form>
CSS:
#loginMessage {
display: none;
/* also set the properties for when it displays with errors */
}