CustomValidator client validation function not firing

Question

I thought that what I was trying to do was rather trivial, but it turns out to trouble me significantly. Here is the situation.

I have two radio buttons (implemented using RadButton) and a RadTextBox. I want to check on the client, before submitting the form that the the RadTextBox is not empty when the one of the two radio buttons is selected (let's say the first one). I have used the CustomValidator and I have set ValidateEmptyText="True" to no luck. The extract of the code is 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's Name</label>
        </td>
        <td style="width:100px">
            <telerik:RadTextBox ID="txtFathersName" Runat="server" EmptyMessage="Father's 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>

The javascript is below:

<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

After spending some time to nail this problem down, I managed to find the root cause of the problem.

The issue is related to the new unobtrusive validation mode of .NET 4.5. For this to work properly jQuery 2.0 is required. This is standard in .NET 4.5. However the embedded jQuery version in RadControls (up to at least version 2013Q3), is v1.9.1 (see here). As a result the CustomValidator does not work properly anymore.

There are two alternatives to this - I have only tried the first one with success:

1. Disable unobtrusive validation mode. To do this you need to include the following line in the <appSettings> section of the web.config file:

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

   The downside: Unobtrusive validation mode is designed to make se of new HTML5 features in order to eliminate the javascript code generated in order to perform the validations, resulting in lighter pages (see here). By disabling it, you are not making use of this feature.

2. Choose not to use the embedded version of jQuery for RadControls (i.e. v1.9.1) and use the one provided by .NET 4.5 (i.e. v2.0).

   The Downside: The problem here is that RadControls have been tested using the embedded version of jQuery and you may run into problems. In order to disable the embedded version of jQuery please refer to this link

Hope this will help the next person who will stumble upon this same problem.

Answer 2

You need to manually call the ValidatorValidate function and pass the custom validator instance from within the rdBtnPhysical_CheckedChanged and the rdBtnLegal_CheckedChanged handlers. I've prepared a short example for you below:

  <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've just tested the code and it seems to work fine.