How do I validate this Checkbox inside gridview?

Question

I have looked at tons of examples of how to validate checkboxes inside a gridview but none seems to be working for me so far.

I had this code with checkbox outside gridview:

   <table>
<tr>
    <td>
        <asp:CheckBox ID="grid1Details" ClientIDMode="Static" runat="server" Checked="false" AutoPostBack="true" OnCheckedChanged="Grid1CheckChanged" /><span style="color:#ff0000">*</span>
    </td>
    <td>
      <asp:gridview ID="Gridview1" gridlines="None" runat="server" ShowFooter="true" AutoGenerateColumns="false" onrowdatabound="Gridview1_RowDataBound" OnRowDeleting="Gridview1_RowDeleting">
        <Columns>
        <asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
        <asp:TemplateField HeaderText="Name">
         <headerstyle horizontalalign="Left" />
            <ItemTemplate>
                <asp:TextBox ID="txtsourcename" placeholder="Name...(e.g, Jane Doe)" runat="server" style="width:250px;" class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Address">
        <ItemStyle HorizontalAlign="Left"></ItemStyle>
            <ItemTemplate>
                <asp:TextBox ID="txtsourceaddress" placeholder="Address..." runat="server" style="width:250px;" class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Income">
        <ItemStyle HorizontalAlign="Left"></ItemStyle>
            <ItemTemplate>
                 <asp:TextBox ID="txtsourceincome" placeholder="Income...(example: 1000)" runat="server" style="width:250px;" class="form-control txtsourceincome numeric"></asp:TextBox>
            </ItemTemplate>
                   </asp:TemplateField>
        <asp:TemplateField HeaderText="">
            <ItemTemplate>
             <asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                    onclick="ButtonAdd_Click" CssClass="grvAddButton" OnClientClick="return ValidateEmptyValue();return validate()" />
            </ItemTemplate>
        </asp:TemplateField>
       <asp:CommandField ShowDeleteButton="True"><ControlStyle CssClass="grvDelButton" /></asp:CommandField>
        </Columns>
      </asp:gridview>
    </td>
</tr>

//JS:
<script type="text/javascript">
    function validate() {

        //employee check
        var checkbox = document.getElementById("<%=grid1Details.ClientID %>");
        var txtsourcename = $("[id*='txtsourcename']")[0];
        var txtsourceaddress = $("[id*='txtsourceaddress']")[0];
        var txtsourceincome = $("[id*='txtsourceincome']")[0];


        if (checkbox.checked) {
            if ($(txtsourcename).val().length != 0 && $(txtsourceaddress).val().length != 0 && $(txtsourceincome).val().length != 0) {
                Alert("Please enter values on all textboxes or check the checkbox next to each textbox.");
                return false;
            } else {
                return true;
            }
        } else {
            if ($(txtsourcename).val().length != 0 && $(txtsourceaddress).val().length != 0 && $(txtsourceincome).val().length != 0) {
                return true;
            } else {
                Alert("Please enter values on all textboxes or check the checkbox next to each textbox.");
                return false;
            }
        }
    }
   </script>

Users are required to either enter values into the textboxes inside GridView1.

If user chooses to leave the textboxes blank, s/he must put a checkmark into the checkbox to continue.

This was working great until management decide to move the checkbox inside gridview and to place it below the name... textbox.

I am having difficulty validating this.

With the following changes to the javascript,:

 var checkbox = document.getElementById("grid1Details");
 var txtsourcename = $("[id*='txtsourcename']")[0];
 var txtsourceaddress = $("[id*='txtsourceaddress']")[0];
 var txtsourceincome = $("[id*='txtsourceincome']")[0];

the validation is no longer working. Whether you ckeck the checkbox or not even though the textboxes are blank, once the submit button is clicked, data is submitted.

Any ideas what I am doing wrong?

Screenshot above shows two images, Image 1, the way it used to be and Image 2, the way management wants it to look like.

Answer 1

Have you taken a look at the RENDERED names of the controls inside your gridview? Because in WebForms, when you actually runs the page, the name of your elements would be different coming from the server. You must use your browser's developer tools to find the real name of your controls and then use document.querySelectorAll(), to select controls based on part of the name, instead of the rendered name.

A little more information about how to use document.querySelectorAll() to select controls by it's partial name can be found here . You can always use jQuery also for these types of selections.