Adding Some Sweet JQuery Animation to Your ASP.NET Form Validators

This blog post is a continuation of my previous post on this subject. In case you haven't, I highly suggest you give it a read here so that you will have some clue what the heck I am talking about. After writing that original post, I received number of requests asking that I take it a step further by adding some animation into the mix so that my extended ASP.NET form validators are truly deserving of the title "jQuery Style". The results are pretty slick, and I have added the new functionality into our internal timesheet system and it seems to be holding it's own accross the different browsers and operating systems that we employ here at DS. And yes, I actually used JQuery to do it, since it offers some nice, quick out of the box options for animation that have been battle tested.

See Demo | Download the Source Code 

How It's Done

Ok, prepare to be dazzled. This whole addition is doable by overriding one of the .NET validation functions and adding about 2 lines of code to it.  Have a look:

   1:  ValidatorUpdateDisplay = function (val) 

   2:  {

   3:      if (typeof(val.display) == "string") 

   4:      {

   5:          if (val.display == "None") 

   6:          {

   7:              return;

   8:          }

   9:          if (val.display == "Dynamic") 

  10:          {

  11:              //changed this block to not set display to inline, but to remove style attribute entirely

  12:              //undo comments if not using jQuery

  13:              if(val.isvalid)

  14:                  $(val).hide("fast");//val.style.display = "none"; 

  15:              else

  16:                  $(val).show("fast");//val.removeAttribute("style");

  17:              return;

  18:          }

  19:      }

  20:      if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) 

  21:      {

  22:          val.style.display = "inline";

  23:      }

  24:      val.style.visibility = val.isvalid ? "hidden" : "visible";

  25:  }

If you'll look closely at lines 14 and 16, all I have done is comment out the old microsoft code that toggles the display and replaced them with the jQuery Show and Hide functions. If you want to glitz it up even more, you could use the extensive jQuery animation library to blink, fade, slide, earthquake and pulsate your validation messages so that they're impossible for your users to ignore....especially when their browser crashes and their machine catches fire. You can also use the same tactic to animate your validation summary show/hide.  Anyway, use this knowledge in good taste....and enjoy.