Gridview checkbox validation not working properly in asp.net

Gani_tpt 2,146 Reputation points
2024-06-20T02:53:43.72+00:00

i am using gridview and it contains checkbox. i am not using any paging in the grid.

I used submit button for the customer new request.

whenever customer submit the request, it should validate and check 'atleast one checkbox"

The validate is throwing, but, immediately it will goes to server click event.

How to validate "pls select atleast one checkbox" before submitting to the server.

 <script type="text/javascript">
        function SelectAll(headerCheckBox) {
            //Get the reference of GridView.
            var GridView = headerCheckBox.parentNode.parentNode.parentNode;
            //Loop through all GridView Rows except first row.
            for (var i = 1; i < GridView.rows.length; i++) {
                //Reference the CheckBox.
                var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                checkBox.checked = headerCheckBox.checked;
            }
        }
    </script>
    <script type="text/javascript">
        function SelectOne(chk) {
            //Get the reference of GridView.
            var GridView = chk.parentNode.parentNode.parentNode;
            //Reference the Header CheckBox.
            var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];;
            var checked = true;
            //Loop through all GridView Rows.
            for (var i = 1; i < GridView.rows.length; i++) {
                //Reference the CheckBox.
                var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                if (!checkBox.checked) {
                    checked = false;
                    break;
                }
            }
            headerCheckBox.checked = checked;
        };
    </script>
    <script type="text/javascript">
        function validateCheckBoxes(sender, args) {
            var isValid = false;
            var GridView = document.getElementById('<%= gvcustomer.ClientID %>');
            for (var i = 1; i < GridView.rows.length; i++) {
                //Reference the CheckBox.
                var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input");
                if (checkBox.checked) {
                    isValid = true;
                    return true;
                    
                }
            }
            if (!isValid) {
                alert("Please select atleast one checkbox");
                return false;
            }
        }
    </script>
<asp:GridView ID="gvcustomer" Width="100%" AutoGenerateColumns="False" runat="server" 
                                    Font-Size="12px" 
                                    OnRowDataBound="OnRowDataBound"
                                    DataKeyNames="Id">
                                    <Columns>
                                        <asp:TemplateField>
                                            <HeaderTemplate>
                                                <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
 					<asp:TemplateField HeaderText="ID">
                                            <ItemTemplate>
                                                <asp:Label ID="Id" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
				 </Columns>
 </asp:GridView>
 <table>
                        <tr >
                            <td >
                                <asp:Button ID="btnSubmit" runat="server"  Text="SUBMIT"
                                    OnClientClick="javascript:validateCheckBoxes()" OnClick="btnSubmit_Click" />
                            </td>
</tr>
</table>

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,393 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,550 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 28,276 Reputation points Microsoft Vendor
    2024-06-20T03:20:38.74+00:00

    Hi @Gani_tpt,

    Change the code as follows:

     <script type="text/javascript">
         function validateCheckBoxes() {
             var isValid = false;
             var gridView = document.getElementById("<%=gvcustomer.ClientID %>");
             var checkBoxes = gridView.getElementsByTagName("input");
             for (var i = 0; i < checkBoxes.length; i++) {
                 if (checkBoxes[i].type == "checkbox" && checkBoxes[i].checked) {
                     isValid = true;
                     return true;
                 }
             }
             if (!isValid) {
                 alert("Please select atleast one checkbox");
                 return false;
             }
         }                
     </script>
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Viorel 114K Reputation points
    2024-06-20T03:03:29.14+00:00

    Try to add return: OnClientClick="return validateCheckBoxes()".

    See:

    1 person found this answer helpful.
    0 comments No comments