How To Scroll To Validation Summary ?

ASP.net by default calls the function window.scrollTo(0,0) after the validation failure from ASP.net validators but not always we have the validation summary control placed at the top. There are instances where we need to place validation summary at some other location but by doing this, instead the user being scrolled to see the validation error, he will always see the top of the page.

There are definitely multiple ways to overcome this and every single alternative has its own disadvantage. I will discuss one of such way which also comes with its own limitation.

The below javascript snippet can do our job.

	
window.scrollTo = function () { };
 
validationSummary.onpropertychange = function () {
     if (this.style.display != 'none') {
          validationSummary.scrollIntoView();
     }
}

At first we are disabling the scrollTo function so that the ASP.net will not be able scroll the page to the top of the page. After that we are tagging a function to “property change” event and whenever the summary control gets the display we are scrolling it to the view of the window. However, the scrollTo function can also be customized to implement that the scrollTo(0,0) alone is ignored.

Author Post : http://jebarson.info/post/2011/04/28/Tip-How-To-Scroll-To-Validation-Summary.aspx

Jebarson

Jebarson is a consultant at Microsoft. In his overall experience of 7+ years, his expertise ranges from VB6, COM / DCOM, .net, ASP.net, WPF, WCF, SL, SQL. He has a greater love for OOA / OOD and SOA. His current focus is on Azure, Windows Phone 7, Crm and much more. He is also a frequent speaker of different community events. He blogs at http://www.jebarson.info/ . You can follow him at @Jebarson007 . Jebarson having good set of tutorials written on Windows Azure, you can found them http://bit.ly/houBNx . He is a contributor of this site and shared many tips and tricks.

2 Comments to “How To Scroll To Validation Summary ?”

Comments are closed.