When the validation fails at the bottom, why the browser shows at the top of the page?

Question

I have just implemented a RequiredFieldValidatior with ValidationSummary by setting a ValidationGroup.

It works fine, when I click the relevant button!

But the viewport changes and shifts at the top of the page and my validaiton result and the button etc stays at the very bottom of the page which is not nice.

Is there a way to prevent this and let the browser still be shopwing the same area after button click?

Additional Note: The validation fails on the client-side; so no post-back occurs. Basically, validation fails, and the viewport slides at the top of the page.

So this is a code specific issue other than a general behaviour, right? — pencilCake, Nov 02 '11 at 12:56
@pencilcake Is your validation summary or the required field at the top of the page? — Suhas, Nov 02 '11 at 13:03

score 2 · Answer 1 · answered Nov 02 '11 at 12:57

2

You can achieve this by adding the following directive to the top of your page:

<%@ Page MaintainScrollPositionOnPostback="true" %>

answered Nov 02 '11 at 12:57

Widor

13,003
7
42
64

I believe that is something to do after a post-back back. Imagine that I am still on the client-side and the validation fails on the client side. (I have that property set to true as well but I don't think it does not effect my case) – pencilCake Nov 02 '11 at 12:59
Ah, I see what you mean about the client-side validation. Combine this with @Tim B James suggestion and it should work? – Widor Nov 02 '11 at 13:02

score 2 · Accepted Answer · answered Nov 02 '11 at 13:00

In your RequiredFieldValidator there is an option to SetFocusOnError which will then move the cursor to the Textbox/input type.

Then in your Page declaration at the top of the page, add in MaintainScrollPositionOnPostback="true"

<%@ Page MaintainScrollPositionOnPostback="true" %>

score 0 · Answer 3 · answered Nov 02 '11 at 13:06

I have done this before to set focus on the fist element that didn't validate when calling validation manually:

//has to be called after Page_ClientValidate()
function ValidatorFocus()
{
    var i;
    for (i = 0; i < Page_Validators.length; i++)
    {
        if (!Page_Validators[i].isvalid)
        {
            document.getElementById(Page_Validators[i].controltovalidate).focus();
            break;
        }
    }
}

When the validation fails at the bottom, why the browser shows at the top of the page?

3 Answers3