ASP.Net validation summary causes page to jump to top

Question

I have a simple form with a few required field validators and a validation summary control. When I submit the form, the client validation will cause the form to ju

Answer 1

Perhaps you could inherit from the required fieldvalidator and override the client side validation in a custom control?

Answer 2

I was running into an issue where using MaintainScrollPositionOnPostback=true would work but would break client-side validation scroll position. So I added a script to bring the validation summary control into view on a postback.

 private void FocusControlOnPageLoad(Control ctrl)
    {

        this.Page.ClientScript.RegisterClientScriptBlock(
          typeof(System.Web.UI.Page), "ctrlFocus",
        @"<script> 
              function ScrollView()
              {
                 var el = document.getElementById('" + ctrl.ClientID + @"')
                 if (el != null)
                 {        
                    el.scrollIntoView();
                    el.focus();
                 }
              }
              window.onload = ScrollView;
        </script>");
    }

with:

protected void Page_PreRender(object sender, EventArgs e)
{
   if (Page.IsValid == false)
        {
          FocusControlOnPageLoad(TheValidationSummary);
        }
}

It seems that I also have to have the scrollTo function blanked out:

window.scrollTo = function() {
            return true;
        }

Got the code (mostly) from here.

Answer 3

Two possible work arounds:

Disable client validation and jump to correct position on post back:

* set EnableClientScript="false" for all validation controls (disabling client validation)
* set MaintainScrollPositionOnPostback="true" in Page directive

Disable the scrollTo function in javascript:

<script type="text/javascript">
    window.scrollTo = function() { }
</script>

Answer 4

I use this: (requires jquery and jquery.scrollTo)

First you put an anchor with a specific class above your validation summary, like so:

<a class="custom_valsum_anchor" />
<asp:ValidationSummary ID="valSum" runat="server" EnableClientScript="true" />

then include this bit of javascript:

$(document).ready(
        function () {
            var $valSum = $(".custom_valsum_anchor");
            if ($valSum.size() > 0) {
                var backup_ValidationSummaryOnSubmit = ValidationSummaryOnSubmit;
                ValidationSummaryOnSubmit = function (validationGroup) {
                    var backup_ScrollTo = window.scrollTo;
                    window.scrollTo = function () { };
                    backup_ValidationSummaryOnSubmit(validationGroup);
                    window.scrollTo = backup_ScrollTo;
                    setTimeout(function () { $("body").scrollTo($valSum); }, 1);
                };
            }
        }

);

Basicaly, it replaces, when necessary, the ValidationSummaryOnSubmit function with a version that temporarily disables window.scrollTo and scrolls to the anchor. It should not be to hard to modify so that it does not use jquery.

Answer 5

Instead of

<script type="text/javascript">
    window.scrollTo = function() { return true; }
</script>

which would indiscriminately override the ScrollTo function for all postbacks, I put the function in my OnClientClick event of the button. As below.

onClientClick="window.scrollTo = function(x,y) { return true; };"

Not sure if it's the best solution, but it seems to have done the job for me.

Answer 6

This is a known bug, as documented on Microsoft Connect. The relevant issue has the basis for the best work around:

var ValidationSummaryOnSubmitOrig = ValidationSummaryOnSubmit;
var ValidationSummaryOnSubmit = function() {
    var scrollToOrig = window.scrollTo;
    window.scrollTo = function() { };
    var retVal = ValidationSummaryOnSubmitOrig();
    window.scrollTo = scrollToOrig;
    return retVal;
}