Asp.net maintainScrollPositionOnPostBack and forms validation fail

Question

I have a very long form that has to be filled out. I have maintainScrollPositionOnPostBack enabled as I have multiple controls that hide/show based on user input.

Since the form is long I'd like for the page to focus and scroll to the first control that caused validation to fail and I have the focus on validation fail option enabled. However, it seems that maintainScrollPositionOnPostBack overrides this (the control does focus but doesn't scroll up to it).

Any ideas for workarounds for this? Everything I've tried so far hasn't worked. It is an asp.net webforms project.

Answer 1

This is a good question and really tricky to get working. But I managed to get one version that you can try and maybe build on.

The MaintainScrollPositionOnPostback="true" -setting sets a series of javascript-events on form submit and window load and these do as you say, "overwrite" the focus set by the validator.

So what I did was add a common css-class to all validators like so:

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="error" ErrorMessage="RequiredFieldValidator" SetFocusOnError="true"
    EnableClientScript="false" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

And then I added another eventlistener to window.load (note we need to leave also the one that Asp.Net has added so we cannot do windows.load = function...):

<script>
    window.addEventListener("load", function () {
        var el = document.getElementsByClassName("error");
        if (el.length > 0) {
            window.location.hash = "#" + el[0].id;                
        }
    });        
</script>

Here you might benefit from jQuery use to be able to support more browsers but addEventListener is pretty well supported.

The script searches for the errormessage and focus on that by it's id with anchor. Javascript has focus-method but it's for form elements so that's why this workaround.

Hope this helps!