asp.net: How to access repeater generated elements using javascript or jquery?

Question

I'm using a master page and a repeater. I need to achieve a selective use of required field validators. When "Yes" is selected (ie the ListItem with the value "0" of the RadioButtonList with the ID "rblMayContact", then and only then the RequiredFieldValidator with the ID "rfvSupervisorName" should be enabled (active). Otherwise the required field validator should be disabled.

The simplified code:

<asp:Repeater ID="repEmploymentHistory" runat="server" Visible="True" OnItemCommand="repEmploymentHistory_ItemCommand"
        OnItemDataBound="repEmploymentHistory_ItemDataBound" OnDataBinding="repEmploymentHistory_DataBinding">
        <ItemTemplate>
            <table id="tblEmploymentHistory" class="table bordered">
                <tr>
<td>
                        Supervisor Name<br />
                        <asp:Label ID="lblSupervisorName" runat="server" CssClass="underlined bold"><%# DataBinder.Eval(Container.DataItem, "SupervisorName")%></asp:Label>
                        <asp:TextBox ID="txtSupervisorName" runat="server" Visible="false" MaxLength="50"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvSupervisorName" runat="server" ControlToValidate="txtSupervisorName"
                            EnableClientScript="true" ValidationGroup="EditEmploymentHistoryGroup" ErrorMessage="Required."
                            CssClass="field-validation-error" />
                        <asp:RegularExpressionValidator ID="revSupervisorName" runat="server" ControlToValidate="txtSupervisorName"
                            ValidationGroup="EditEmploymentHistoryGroup" ValidationExpression="^[-a-zA-Z'.\s]{1,50}$"
                            ErrorMessage="Enter a valid name." CssClass="field-validation-error" />
</td>
</tr>
<tr>
                    <td>
                        <asp:Label ID="lblContactQuestion" runat="server" Text="May we contact this employer? (If no, please explain)">May we contact this employer?</asp:Label>
                        <asp:Label ID="lblContactAnswer" runat="server" CssClass="underlined bold"><%#(String.IsNullOrEmpty(DataBinder.Eval(Container.DataItem, "ContactEmployer").ToString())) ? String.Empty : (bool)DataBinder.Eval(Container.DataItem, "ContactEmployer") ? "Yes" : "No" %></asp:Label>
                        <asp:RadioButtonList ID="rblMayContact" runat="server" RepeatDirection="Horizontal"
                            RepeatLayout="Flow" AutoPostBack="False" Visible="false" >
                            <asp:ListItem Value="0" onclick="ValidateSupervisor(this);return false;"> Yes </asp:ListItem>
                            <asp:ListItem Value="1"> No </asp:ListItem>
                        </asp:RadioButtonList>
                        <asp:Label ID="lblNoContactReason" runat="server" CssClass="underlined bold"><%#(String.IsNullOrEmpty(DataBinder.Eval(Container.DataItem, "ReasonNotContacting").ToString())) ? String.Empty : DataBinder.Eval(Container.DataItem, "ReasonNotContacting") %></asp:Label>
                        <asp:TextBox ID="txtNoContactReason" runat="server" MaxLength="200" Visible="false"></asp:TextBox>
                    </td>
                </tr>
 </table>
        </ItemTemplate>

The difficulty is to access the repeating item's elements, because each has the index prefixed.

So, using javascript or jquery, how to enable the required field validator pertaining to the text box, only when a particular radio button is selected?

Answer 1

Try this in your Repeater's ItemDataBound even:

protected void repEmploymentHistory_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var rblMayContact = e.Item.FindControl("rblMayContact") as RadioButtonList;
        var rfvSupervisorName = e.Item.FindControl("rfvSupervisorName") as RequiredFieldValidator;
        var revSupervisorName = e.Item.FindControl("revSupervisorName") as RegularExpressionValidator;

        if (rfvSupervisorName != null && revSupervisorName != null)
        {
            revSupervisorName.Enabled = rfvSupervisorName.Enabled = rblMayContact != null && rblMayContact.SelectedIndex >= 0;
        }
    }
}

And add the "AutoPostBack" property of your RadioButtonList to true:

<asp:RadioButtonList runat="server" AutoPostBack="True">
    ...
</asp:RadioButtonList>

This way, every time the RadioButtonList is changed, it posts back to the page and the ItemDataBound of your repeater enables/disables the Validator controls.