ASP.Net validation summary causes page to jump to top

Adam_82199 0
Viewed 27985

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 jump to the top of the page. If i remove the validation summary, the page does not move.

Heres a quick example:

<asp:TextBox ID="test" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="testrequired" runat="server" ControlToValidate="test">*</asp:RequiredFieldValidator>
<asp:ValidationSummary ID="summary" runat="server" />
<asp:Button ID="submit" runat="server" Text="submit" />

I've tried setting SetFocusOnError="true" in the required field validator and MaintainScrollPositionOnPostback="true" for giggles - even though this isn't a postback - without any luck. Is there a known solution for this problem?

EDIT:

I've found the problem in the js generated by WebResource.axd. Seems to come down to a single line in the ValidationSummaryOnSubmit() function.

line 534: window.scrollTo(0,0);

Any ideas on how to remove or bypass this?

EDIT2:

Quick work around for the time being:

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

Still hoping for a client side solution...

EDIT3:

It seems a better work around is to just override the window.scrollTo() function so that it does nothing when called by the validation script:

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

Adding the above anywhere on the page leaves the client validation in tact, but disables the window.scrollTo() method throughout the page

validation asp.net
9 Answers

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>
Adam_821990

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;
}
user_2837760

The page is going to jump to wherever your validation summary is. If you'd like it to stay near the bottom, move the validation summary down near the submit button.

EDIT, you can also try turning the validation summary off.

user_276780

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.

user_309460

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

scottschulthess_683930
Dan_Vallejo_797270
Related