View Full Version : JQuery function to show validation errors with minor animation

10-12-2011, 07:13 PM
This is a little something I use on several forms i maintain. My form validation functions typically append div's or P's into a hidden container, then I use this function to display the results, one DIV or P at a time, that fade into view in succession. It could obviously serve other purposes.
here is a demo on jsfiddle: http://jsfiddle.net/bcDpS/5/

My form validation creates a basic html structure like so:

<div id="errorcontainer">
<div class="eheader">&nbsp;&nbsp;Error Occured!</div>
<div id="errors">
<div>Name field is blank.</div>
<div>Downtime option not selected. </div>
<div>Start time has not been set.</div>
<div>End Time has not been set.</div>

and the css: ( notice I have set display none, not only to the initial container but also the individual div's within #errors)

#errorcontainer {
margin-top: 3px;
display: none;
#errors {
.eheader {
padding: 5px;
background: #FFE1E1;
font-weight: bold;
line-height: 1em;
#errors div {
display: none;
margin-top: 5px;
margin-bottom: 5px;
padding: 3px 5px;
background: #EAEAEA;
color: #9F0000;

the function itself :

function show_errors() {
//clear error container div
$(".eheader").html("&nbsp;&nbsp;Error Occured!")
var header = "&nbsp;&nbsp;Error Occured!"
var headers = "&nbsp;&nbsp;Errors Occured!"
//scroll to top of screen to show errors to user
scroll(0, 0);
// delays 200 milliseconds, then shows error container div,
// then fades in each error in succession,
// while also updating the total error count in .eheader
$("#errorcontainer").delay(200).fadeIn(800, function () {
$("#errors div").each(function (index) {
$(this).delay(800 * index).hide(600,function(){
if (index === 0){