How to control ASP.NET Validator Controls Client Side validation

Question

Below is the output of my page after it runs the below code:

I'm using ValidatorEnable client side validation in my situation (if you know better way to do that, let me know.)

My question is:

Ihave a gridview with checkbox and a dropdownlist next to each other as shown in the screen shot.

So, if the user checked on the checkbox it enabled the dropdownlist to select from. if the user clicks on submit button it validates and ask the user to select any options from the dropdownlist.

Problem:

But the problem is: its validating for all the rows instead of the one i have clicked.

How can i enforce to validate that particular row the user checked on the checkbox?

    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" OnRowDataBound="gv_RowDataBound"
            EnableModelValidation="True">
            <Columns>
                <asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
                <asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
                    SortExpression="FirstName" />
                <asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
                    SortExpression="LastName" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="checkbox1" runat="server" />
                        <asp:DropDownList ID="ddl_PaymentMethod" runat="server">
                                    <asp:ListItem Value="-1">----</asp:ListItem>
                                    <asp:ListItem Value="0">Month</asp:ListItem>
                                    <asp:ListItem Value="1">At End</asp:ListItem>
                                    <asp:ListItem Value="2">At Travel</asp:ListItem>
                                </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="requiredDDL" runat="server" ControlToValidate="ddl_PaymentMethod"
                            ErrorMessage="Please select" InitialValue="-1" Display="Dynamic"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Value">
                    <ItemTemplate>
                        <asp:TextBox ID="txt_Value" runat="server" Width="58px" Text="0"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
    CheckBox checkbox1 = (CheckBox)e.Row.FindControl("checkbox1");
    DropDownList ddl_PaymentMethod = (DropDownList)e.Row.FindControl("ddl_PaymentMethod");
    ddl_PaymentMethod.Attributes.Add("disabled", "disabled");

   checkbox1.Attributes.Add("onclick", "javascript:EnableCheckBox('" + ddl_PaymentMethod.ClientID + "','" + checkbox1.ClientID + "')"); 
 }
}

function EnableCheckBox(ddl, chk) {

  var ddl_PaymentMethod = document.getElementById(ddl);
  var _chkbox = document.getElementById(chk);
  if (_chkbox.checked) {
      ddl_PaymentMethod.disabled = false;
      validateCheckBox(ddl_PaymentMethod, true);
   }
   else { 
      ddl_PaymentMethod.disabled = true;
      validateCheckBox(ddl_PaymentMethod, false);
   }
}

function validateCheckBox(ddl, state) {
    ValidatorEnable(document.getElementById(ddl.id, state));             
}

Answer 1

got it working for you... gridview:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"  OnRowDataBound="gv_RowDataBound">
        <Columns>
            <asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
            <asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
                SortExpression="FirstName" />
            <asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
                SortExpression="LastName" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkbox1" runat="server" />
                    <asp:DropDownList ID="drpPaymentMethod" runat="server">
                                <asp:ListItem Value="-1">----</asp:ListItem>
                                <asp:ListItem Value="0">Month</asp:ListItem>
                                <asp:ListItem Value="1">At End</asp:ListItem>
                                <asp:ListItem Value="2">At Travel</asp:ListItem>
                            </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="rfv" InitialValue="-1" ControlToValidate="drpPaymentMethod" Enabled="false" Display="Static" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Value">
                <ItemTemplate>
                    <asp:TextBox ID="txt_Value" runat="server" Width="58px" Text="0"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

CS:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox checkbox1 = e.Row.FindControl("checkbox1") as CheckBox;
            RequiredFieldValidator rfv = e.Row.FindControl("rfv") as RequiredFieldValidator;
            DropDownList drpPaymentMethod = (DropDownList)e.Row.FindControl("drpPaymentMethod");
            // you can just pass "this" instead of "myDiv.ClientID" and get the ID from the DOM element
            checkbox1.Attributes.Add("onclick", "UpdateValidator('" + checkbox1.ClientID + "','" + drpPaymentMethod.ClientID + "','" + rfv.ClientID + "');");
            if (!checkbox1.Checked)
                drpPaymentMethod.Attributes.Add("disabled", "disabled");
        }
    }

javascript:

function UpdateValidator(chkID, drpID, validatorid) {
        //enabling the validator only if the checkbox is checked
        var enableValidator = $("#" + chkID).is(":checked");

        if (enableValidator)
            $('#' + drpID).removeAttr('disabled');
        else
            $('#' + drpID).attr('disabled', 'disabled');

        var vv = $('#' + validatorid).val();

        ValidatorEnable(document.getElementById(validatorid), enableValidator);
    }