Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

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

Telerik UI for ASP.NET AJAX
Resources Buy Try

4 posts, 0 answers

Lefteris

4 posts

Member since:
Mar 2012

Posted 07 Nov 2013 Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 08 Nov 2013 Link to this post

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

4 posts

Member since:
Mar 2012

Posted 08 Nov 2013 Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 11 Nov 2013 Link to this post

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.

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

Lefteris

Shinu

Lefteris

Shinu