Extending Jquery validate to show/hide div or clear div after validate is ran

Question

To clarify, how can run a custom function right before jquery's validation plugin runs its validate function (Which is what looks at all the fields and shows the error message)?

Right now i have all of my errors outputting to a div. Id like to catch the validate event and clear the div right before its ran of my old errors. Then id like to show/hide that div based on if it has any labels in it that were auto generated by the jquery validation plugin. I can do everything but figure out how to extend the event, run the stuff i need to, then call the validate function. Thanks!

Answer 1

There are a number of event handlers that you can attach to. success & invalidHandler seem to be most appropriate for your requirements, but errorPlacement might also be useful.

See http://docs.jquery.com/Plugins/Validation/validate#toptions for more information.

Answer 2

There are 2 properties to do this directly errorContainer and errorLabelContainer, for example of you wanted a list of the errors in your <div> and the <div> to hide/show based on if any are present, you'd do this:

$("#myform").validate({
   errorContainer: "#myDivID",
   errorLabelContainer: "#myDivID ul",
   wrapper: "li",
   //other options/rules...
});

The options page has more detail around this, but that's everything you need for a simple fix, assuming a list is what you have, from the question I wasn't entirely sure. If you wanted say divs inside your div, no sweat...just change "#myDivID ul" to "#myDivID" and "li" to "div"...or whatever element you want.

The above will hide <div id="myDivID"> if there are no errors, show it if there are any. This works even if you have a description/help message or something at the top of the div and the errors are just a portion of the div, determined by the errorLabelContainer selector...it'll still hide/show based on any errors and leave your message/help untouched.