ASP.NET ValidationSummary – Stopping the scroll back to top

I came across an issue today with a validation summary form on a sign up form.  The form was at the bottom of a page containing much text…well that’s what was in the design and it will probably turn into “Please sign up here” once the client get’s their hands on it.  But that’s par for the course.

Now because the sign up form was below the lorem ipsum text in the design, I also placed the validation summary below this.  But this causes a small technical issue when you hit the submit button and some of your elements do not validate, the whole page scrolls to the top.  Not very easy for a user to see what went wrong without scrolling back to the form.

Why does this happen?  Microsoft in their infinite wisdom have placed some really annoying javascript into their validation code.  If you inspect the shite that Microsoft pumps into the page with a form and validation controls, you may find (there is a lot of code) a window.scrollTo(0,0) line buried away.  This of course scrolls your window back to the top.  For most cases this will be fine, as most cases the form is not preceded by craps loads of text, and your validation summary will either be at the top, or be as close as dammit to it.  Not in my case, and not as it seems many others.  So I had to find a solution.

The Solution

After searching the tints for the answer, I found many a “solution” that involved tonnes of javascript, hooks, or even just blundering around with jQuery.  I didn’t want any of this.  I didn’t to put more code in place, that could break my code.  Was there a way I could just make it not scroll?  Yes.  But it’s not very elegant, well depends on your view of elegant, beauty – eye – beholder…

What I did was find the offending method in Microsoft’s javascript.  Copy it.  Remove the window.scrollTo(0,0) line (and a whole section that I would never use, as the alert box validation summary is real ugly), compress it, save it to a file, and place that at the bottom of my page containing the validation summary control that I didn’t want to scroll.  I can’t stress enough here, place it at the bottom.  If you ask me how to make it work, and you haven’t placed it at the bottom, I will personally bring Bill Gates round your house to watch him kick your ass!  That’s how important it is.  Why?  So that it will override Microsoft’s own function.  When the function get’s called, your function will be run in place, and the window won’t scroll.  Ta da!! Nice!

An more elegant solution

Now that’s pretty heavy handed, as you may have other forms in your site that could help with the scroll.  To make it more elegant, I renamed the function I copied to __ValidationSummaryOnSubmit.  Then in a javascript onload function I could do this:

var withScroll = false;
        $(document).ready(function () {
            if (!withScroll) {
                ValidationSummaryOnSubmit = __ValidationSummaryOnSubmit;

I could now place my overriden piece of code in a masterpage, and then on a form to form basis I could make the overriden function actually override, or just use the built in one.

Here is my override code, all compressed up and ready to go.  Remember it won’t work if you want that annoying popup.  I fixed it only to work with the non alert box popup.

An even more elegant solution

This isn’t something I did, but something I would like.  Microsoft should have a ScrollToTop=”true/false” property on the validation summary control, so that I didn’t need to override code.  But the code I added is so tiny, it’s not really a problem.

Hope this helps someone else out there.

3 thoughts on “ASP.NET ValidationSummary – Stopping the scroll back to top”

  1. That’s clever coding, however the side-effect I am seeing is that validation-summary’s header text is not displayed. It behaves as though there is no validation summary control at all. and for the sake of Mr Bill Gates, I indeed placed my code at the bottom, and that’s why I didn’t get whipped.

  2. The solution there would be to move the validation summary down to just above the form, or below the submit button.

    If you form is very long, and is the only thing on the page, then I don’t believe this is the solution for you, as I created it when the page was filled with content before the form was displayed.

Leave a Reply

Your email address will not be published.