I have seen this question asked before but no working solutions have been provided. I am trying to create a client side validation for my ASP.NET CheckBoxList control to make sure at least one item is selected. Here is the code for the CheckBoxList:
<asp:CheckBoxList ID="Regions" runat="server"
DataTextField="MY_TEXT"
DataValueField="MY_VALUE"
RepeatColumns="5"
RepeatLayout="Table"
RepeatDirection="Vertical"
ValidationGroup="ModalValidation"></asp:CheckBoxList><asp:CustomValidator ID="cvRegions" runat="server"
ClientValidationFunction="ValidateCheckBoxList"
ErrorMessage="Please Select at Least One Region"
ValidationGroup="ModalValidation"
style="display: none"></asp:CustomValidator><ajax:ValidatorCalloutExtender ID="vcRegions" runat="server"
TargetControlID="cvRegions"
PopupPosition="BottomLeft"
WarningIconImageUrl="~/Images/Icons/warning.png"
CloseImageUrl="~/Images/Icons/exit.png"></ajax:ValidatorCalloutExtender>Here is the code for the client side function which performs the actual validation:
function ValidateCheckBoxList(sender, args)
{
args.IsValid = false;
var checkedBoxes = $('[id$=Regions] input[type=checkbox]:checked');
if (checkedBoxes.length > 0) {
args.IsValid = true;
}
}When I click the save button on my page I get the following error:
0x800a139e - JavaScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined
Parameter name: id
The problem appears to be that the ValidatorCalloutExtender requires the ControlToValidate property of the CustomValidator to be specified. When I remove the ValidatorCalloutExtender the actual CustomValidator works as expected. I made a mock solution to the problem by inserting a TextBox with zero width/no border and attaching the CustomValidator to that control. While the validator callout shows next to the hidden TextBox it does the job.
Does anyone have a solution to this problem without the crazy hack?