JQuery and ASP.Net Validation Summary working together
First off, thanks goes out to the delphic sage for his article on using JQuery and the ASP.Net validation controls. This is almost what I was wanting to do.
But not quite. What I was looking for was a way to animate the actual validation summary display rather than the individual validation controls.
After looking at the sage’s sample of overriding the display of the individual controls, I was able to user Firebug to find the JavaScript function that displays the validation summary itself. The function is called ValidationSummaryOnSubmit.
So all I did was copy that function from the ASP.Net script file and paste it into the <script></script> tag at the bottom of my aspx page. Then I added the JQuery code to animate the display. Here’s what I came up with (well Tumblr didn’t like the entire function, so you can view the entire function here):
ValidationSummaryOnSubmit = function(validationGroup) {
....
summary.innerHTML = s;
window.scrollTo(0, 0);
$(summary).slideDown('slow');
....
}The only change I made was changing the summary.display = ” to the JQuery slideDown() method. Then I put the ValidationSummary control at the top of the page and added the window.scrollTo(0,0) to make sure the summary will be in view.
If your ValidationSummary is in a different location on the page, you can change the window.scrollTo(0,0) to the following:
window.scrollTo(0, $(summary).position().top);
I also added a little CSS to the summary to make it stand out a little.
One thing worth mentioning, although I didn’t test it, I am sure that this function will need to appear after the original, so it cannot be placed in the <head /> since the web resources placed by .Net appear inside the <form /> tag.
Also, this will work with multiple validation summaries with different validation groups.
In my next post I will show how to use a similar technique to display a message after a postback with JQuery and the UpdatePanel.
