In this article I will explain with an example, how to scroll to the first error or to the first Validator that has raised the error when validation fails in ASP.Net using JavaScript.
In a long form it becomes difficult for users to find out which validation has failed and hence this feature enhances the user experience by scrolling the page and setting focus to the control where the validation is failed.
 
 
HTML Markup
The following HTML Markup consists of a long form with multiple controls and validators.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
    <tr>
        <td>
            First Name
        </td>
        <td>
            <asp:TextBox ID="txtFirstName" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtFirstName"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            Last Name:
        </td>
        <td>
            <asp:TextBox ID="txtLastName" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtLastName"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            Designation:
        </td>
        <td>
            <asp:TextBox ID="txtDesignation" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtDesignation"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            Address:
        </td>
        <td>
            <asp:TextBox ID="txtAddress" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtAddress"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            Telephone:
        </td>
        <td>
           <asp:TextBox ID="txtTelephone" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtTelephone"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            Email:
        </td>
        <td>
            <asp:TextBox ID="txtEmail" runat="server" />
        </td>
        <td>
            <asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtEmail"
                runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;
        </td>
        <td colspan="2">
            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
        </td>
    </tr>
</table>
</form>
 
 
Scroll to (First error) Validator that raised error when Validation fails in ASP.Net
In order to scroll the page to the validator that has raised the error, the ASP.Net WebForm_OnSubmit method which is an inbuilt ASP.Net JavaScript method needs to be overridden.
 
In order to make this method work, it needs to be placed it at the very end of the Page or Master Page just where <body> the tag ends i.e. above </body> tag.
 
Inside the WebForm_OnSubmit method, a loop is executed over the ASP.Net validators of the page and if a validator’s validation has failed then the page is scrolled to the control for which the error has been raised and also its focus is set.
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function WebForm_OnSubmit() {
        if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
            for (var i in Page_Validators) {
                try {
                    if (!Page_Validators[i].isvalid) {
                        var control = $("#" + Page_Validators[i].controltovalidate);
 
                        var top = control.offset().top;
                        $('html, body').animate({ scrollTop: top - 10 }, 800);
                        control.focus();
                        return;
                    }
                } catch (e) { }
            }
            return false;
        }
        return true;
    }
</script>
 
 
Screenshot
Scroll to (First error) First Validator that raised error when Validation fails in ASP.Net
 
 
Downloads
Download Code