1

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.

mtNewToJava
  • 15
  • 4

1 Answers1

0

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!

Esko
  • 4,109
  • 2
  • 22
  • 37
  • Thanks a lot for the reply! I just tried this, it does recognise the number of controls which failed validation. However, `the window.location.hash = "#" + el[0].id;` seems not to be doing anything. I'm not sure why this is. I'll keep testing and update – mtNewToJava Jul 07 '16 at 09:28
  • Hmm could it be the order of the load-events, try putting this script to the very bottom of body-element. – Esko Jul 07 '16 at 09:37
  • Yes that solved the problem! Had to put the script as the very last thing on the Page! I'm guessing another possible solution would be to use an update panel instead of doing full Postbacks and turn maintainScrollPositionOnPostBack="false", might try that late if I have some time. Thanks very much for your help. – mtNewToJava Jul 07 '16 at 10:32
  • For anyone with the same problem and if you are using a fixed-top navbar you can call `window.scrollBy(x, -y);` to scroll to the right position -y will have to be the height of your navbar so you scroll back up by that amount – mtNewToJava Jul 07 '16 at 10:44