[Solved] Scroll to Validator that raised error not working with CustomValidator in ASP.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Dear All,

I'm validating the checkboxlist using the below URL

Validate ASP.Net CheckBoxList (at least one CheckBox checked) using Custom Validator

After the validation, I need to move the page to the top from where the validation starting point using the below URL

Scroll to (First error) First Validator that raised error when Validation fails in ASP.Net

But it's not working with me.

Thanks

Posted 6 months ago

Hi irshad1231,

Check this example. Now please take its reference and correct your code.

HTML

<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>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>Designation:</td>
            <td><asp:TextBox ID="txtDesignation" runat="server" /></td>
            <td><asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtDesignation" runat="server" /></td>
        </tr>
        <tr>
            <td>Fruit:</td>
            <td>
                <asp:CheckBoxList ID="chkFruits" runat="server">
                    <asp:ListItem Text="Mango" />
                    <asp:ListItem Text="Apple" />
                    <asp:ListItem Text="Banana" />
                    <asp:ListItem Text="Pineapple" />
                    <asp:ListItem Text="Guava" />
                    <asp:ListItem Text="Grapes" />
                    <asp:ListItem Text="Papaya" />
                </asp:CheckBoxList>
            </td>
            <td><asp:CustomValidator ID="CustomValidator1" ErrorMessage="Please select at least one item."
                    ForeColor="Red" ClientValidationFunction="ValidateCheckBoxList" runat="server" />
            </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>Telephone:</td>
            <td><asp:TextBox ID="txtTelephone" runat="server" /></td>
            <td><asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtTelephone" runat="server" /></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>&nbsp;</td>
            <td colspan="2">
                <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
            </td>
        </tr>
    </table>

JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ValidateCheckBoxList(sender, args) {
        var checkBoxList = document.getElementById("<%=chkFruits.ClientID %>");
        var checkboxes = checkBoxList.getElementsByTagName("input");
        var isValid = false;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                isValid = true;
                break;
            }
        }
        args.IsValid = isValid;
    }
    function WebForm_OnSubmit() {
        if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
            for (var i in Page_Validators) {
                try {
                    if (!Page_Validators[i].isvalid) {
                        var control;
                        if (Page_Validators[i].controltovalidate != undefined) {
                            control = $("#" + Page_Validators[i].controltovalidate);
                        } else {
                            control = $("#" + Page_Validators[i].id);
                        }

                        var top = control.offset().top;
                        $('html, body').animate({ scrollTop: top - 50 }, 800);
                        control.focus();
                        return;
                    }
                } catch (e) { }
            }
            return false;
        }
        return true;
    }
</script>

Screenshot