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>

score 19 · Accepted Answer · answered Nov 24 '13 at 11:38

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:

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.
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.

you are the man. thank you for posting this. i've been scratching my head for 2 hours about this. explained it perfectly. — kman, Jan 15 '14 at 16:11
Hi @Lefteris, I ran into the same problem but in my case, I'm on .Net 4.0 not 4.5. The custom validator JS function never gets fired. Ohh, and I'm using a ValidationSummary control to display the errors. Any suggestions? — Sergiu, Sep 23 '15 at 06:57
Per @ian-grainger's comment in another answer, a similar symptom may also be caused by a legacy flag in the `web.config`. https://stackoverflow.com/a/656290/3196753 — tresf, Jan 11 '19 at 15:33

Genady Sergeev · Answer 2 · 2013-11-08T13:02:33.403

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.

Thank you very much, also for the code snippet provided. This is very helpful. One last question: is this the normal, documented way of using the CustomValidator or is it more of a workaround? — Lefteris, Nov 08 '13 at 12:18
Microsoft docuemntation is very vague on that topic. I personally have never ever managed to make the custom validator work with an empty text box if not called explicitly. I believe that the ValidateEmptyText property is more suited for the sever-side counter-part of the validator. — Genady Sergeev, Nov 08 '13 at 13:04
Mine wasn't working because of in the Web.config. I mean, obviously! Thanks to this answer I found it: http://stackoverflow.com/a/656290/48348 — Ian Grainger, Oct 20 '15 at 12:45

CustomValidator client validation function not firing

2 Answers2