I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the table containing the radio buttons, not the group itself.
Here's the snippet of my code:
<asp:RadioButtonList CssClass="required" ID="rdb_studysubj" runat="server" OnSelectedIndexChanged="rdb_studysubj_SelectedIndexChanged">
<asp:ListItem Value="Humans">Humans</asp:ListItem>
<asp:ListItem Value="Non-Human primates">Non-Human primates</asp:ListItem>
<asp:ListItem Value="Rodents">Rodents</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:RadioButtonList>
Upon trying to validate using jQuery, it's showing as invalid.
function WebForm_OnSubmit() {
if($('.required').val() == null) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
The issue seems to be that the CSS class is being applied to the table instead of the radio button group itself. How can we resolve this?