CustomValidator client check function does not work

Question

I thought that what I was trying to do was pretty trivial, but it seems to bother me a lot. Here is the situation.

I have two radio buttons (implemented using RadButton) and RadTextBox. I want to check on the client before submitting a form in which the RadTextBox is not empty when one of the two radio buttons is selected (say, the first). I used CustomValidator and I set ValidateEmptyText = "True" so that no luck. Code excerpt below:

<asp:Panel runat="server" ID="Panel1"> <table> <tr> <td class="auto-style5"> <telerik:RadButton ID="rdBtnIndividual" runat="server" AutoPostBack="False" GroupName="rdEmplrType" Text="Individual" ToggleType="Radio" OnClientCheckedChanged="rdBtnPhysical_CheckedChanged" UseSubmitBehavior="False"> <ToggleStates> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton> </td> <td> <telerik:RadButton ID="rdBtnLegal" runat="server" AutoPostBack="False" GroupName="rdEmplrType" Text="Legal Entity" ToggleType="Radio" OnClientCheckedChanged="rdBtnLegal_CheckedChanged" UseSubmitBehavior="False"> <ToggleStates> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton> </td> </tr> <tr> <td class="auto-style5"> <label>Name:</label> </td> <td> <telerik:RadTextBox ID="txtName" Runat="server" EmptyMessage="Name" LabelWidth="64px" Resize="None" Width="160px" DisabledStyle-BackColor="Silver"> </telerik:RadTextBox> </td> <td><asp:RequiredFieldValidator ID="THIS_IS_WORKING" ControlToValidate="txtName" runat="server" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" > </asp:RequiredFieldValidator> </td> </tr> <tr> <td class="auto-style5"> <label>Father Name</label> </td> <td style="width:100px"> <telerik:RadTextBox ID="txtFathersName" Runat="server" EmptyMessage="Father Name" LabelWidth="64px" Resize="None" Width="160px" DisabledStyle-BackColor="Silver"> </telerik:RadTextBox> </td> <td> <asp:CustomValidator runat="server" ID="NOT_WORKING_VALIDATOR" ControlToValidate="txtFathersName" ValidateEmptyText="True" ClientValidationFunction="RequiredIfIndividual" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" EnableClientScript="True"> </asp:CustomValidator> </td> </tr> </table> </asp:Panel> 

Below is javascript:

 <script type="text/javascript"> function RequiredIfIndividual(sender, args) { var chkBoxIndividual = $find("<%=rdBtnIndividual.ClientID%>"); chkBoxIndividual = $telerik.toButton(chkBoxIndividual); if (chkBoxIndividual.get_checked()) { if (args.Value == "") { args.IsValid = false; } else { args.IsValid = true; } } else { args.IsValid = true; } } </script> 

Answer 1

Having spent some time fixing this problem, I managed to find the root cause of the problem.

The problem is with the new unobtrusive .NET 4.5 validation mode. For proper operation, jQuery 2.0 is required. This is the standard in .NET 4.5. However, the built-in version of jQuery in RadControls (at least until 2013Q3) is v1.9.1 (see here ). As a result, CustomValidator does not work correctly.

There are two alternatives to this - I just tried the first with success:

• Disable unobtrusive verification mode. To do this, you need to include the following line in the <appSettings> section of the web.config :

  <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

  Disadvantage: the unobtrusive check mode is designed to create new HTML5 features to exclude javascript code generated to perform validation, resulting in lighter pages (see here ). By disabling it, you are not using this feature.

• Choose not to use the built-in jQuery version for RadControls (i.e. v1.9.1) and use the version provided by .NET 4.5 (i.e. v2.0).

  The Downside: The problem is that RadControls have been tested using the built-in version of jQuery and you may run into problems. To disable the embedded version of jQuery, refer to this link

Hope this helps the next person who stumbles upon the same problem.

Answer 2

You need to manually call the ValidatorValidate function and pass an instance of a custom validation instance from the rdBtnPhysical_CheckedChanged and rdBtnLegal_CheckedChanged handlers. I have prepared a short example for you:

  <script type="text/javascript"> function RequiredIfIndividual(sender, args) { var chkBoxIndividual = $find("<%=rdBtnIndividual.ClientID%>"); chkBoxIndividual = $telerik.toButton(chkBoxIndividual); if (chkBoxIndividual.get_checked()) { if (args.Value == "") { args.IsValid = false; } else { args.IsValid = true; } } else { args.IsValid = true; } } function rdBtnPhysical_CheckedChanged(sender, args) { ValidatorValidate($get("NOT_WORKING_VALIDATOR")); } function rdBtnLegal_CheckedChanged(sender, args) { ValidatorValidate($get("NOT_WORKING_VALIDATOR")); } </script> 

I just checked the code and it seems to be working fine.