CustomValidator does not fire client event inside an asp:Panel associated with RadAjaxManager

[Lefteris]

Hello,

I want to use a CustomValidator for a RadTextBox. The RadTextbox is inside an asp:Panel which is ajaxified with the RadAjaxManager. I have a CustomValidator with a ClientValidationFunction and ValidateEmptyText="True". However, the client side validation function is never called. 

Below is the code extract from the control and validator. Note that the RequiredFieldValidator (again inside the Panel) works fine. Note that I am using Q3 2013

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="btnSubmit">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelCssClass="" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server">

    </telerik:RadAjaxLoadingPanel>

    <telerik:RadFormDecorator id="FormDecorator1" runat="server" DecoratedControls="All" Skin="Metro"></telerik:RadFormDecorator>

    <asp:Panel runat="server" ID="Panel1">

    <table>

    <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="CustomFieldValidator1" ControlToValidate="txtFathersName" ClientValidationFunction="RequiredIfPhysical" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" ValidateEmptyText="True" Display="Dynamic" ></asp:CustomValidator>

                </td>

        </tr>

        <tr>

            <td class="auto-style5">

                <label>City:</label>

            </td>

            <td class="auto-style6">

                <telerik:RadTextBox ID="txtCity" Runat="server" EmptyMessage="City" LabelWidth="64px" Resize="None" Width="160px" Wrap="False" CausesValidation="False">

                </telerik:RadTextBox>

                 

            </td>

            <td><asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtCity"

                    runat="server" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" Display="Dynamic" ></asp:RequiredFieldValidator></td>

        </tr>

        </table>

    </asp:Panel>    
Further below there is also the javascript validator:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function RequiredIfPhysical(sender, args) {
                var chkBoxPhysical = $find("<%=rdBtnPhysical.ClientID%>");
                chkBoxPhysical = $telerik.toButton(chkBoxPhysical);
                if (chkBoxPhysical.get_checked()) {
                    if (args.Value == "") {
                        args.IsValid = false;
                    }
                    else {
                        args.IsValid = true;
                    }
                } else {
                    args.IsValid = true;
                }
            }
        </script>
</telerik:RadCodeBlock>

[Shinu]

Hi Lefteris,

Please have a look into the code snippet to call a client side event of CustomValidator inside RadAjaxManager.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnSubmit">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelCssClass="" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All"
    Skin="Metro"></telerik:RadFormDecorator>
<asp:Panel runat="server" ID="Panel1">
    <table>
        <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="CustomFieldValidator1" ControlToValidate="txtFathersName"
                    ClientValidationFunction="RequiredIfPhysical" ValidateEmptyText="true" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>"
                    Display="Dynamic"></asp:CustomValidator>
            </td>
        </tr>
        <tr>
            <td class="auto-style5">
                <label>
                    City:</label>
            </td>
            <td class="auto-style6">
                <telerik:RadTextBox ID="txtCity" runat="server" EmptyMessage="City" LabelWidth="64px"
                    Resize="None" Width="160px" Wrap="False" CausesValidation="False">
                </telerik:RadTextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtCity"
                    runat="server" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>"
                    Display="Dynamic"></asp:RequiredFieldValidator>
            </td>
        </tr>
    </table>
</asp:Panel>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Check" />
<telerik:RadButton ID="btnSubmit" runat="server" Text="Submit">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function RequiredIfPhysical(sender, args) {
        alert("Fired");
        var chkBoxPhysical = document.getElementById("<%=CheckBox1.ClientID%>");
        if (chkBoxPhysical.checked) {
            if (args.Value == "") {
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        } else {
            args.IsValid = true;
        }
    }
</script>

Thanks,
Shinu.

[Lefteris]

Thank you Shinu, 

unfortunately the alert never gets called. I also posted this in Stackoverflow and I got this answer:

http://stackoverflow.com/questions/19847874/customvalidator-client-validation-function-not-firing

Do you think that there is a problem with CustomValidator not firing client events? 

[Shinu]

Hi Lefteris,

As far as I know there is no issue with Client event of CustomFieldValidator. Please have a look into the sample code.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<telerik:RadButton ID="RadButton1" runat="server" Text="submit" AutoPostBack="false">
</telerik:RadButton>
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="RadTextBox1"
    ClientValidationFunction="validate" ValidateEmptyText="true">
</asp:CustomValidator>

JavaScript:

<script type="text/javascript">
    function validate() {
        alert("Required");
        //your code
    }
</script>

Thanks,
Shinu.