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

4 posts, 0 answers
  1. Lefteris
    Lefteris avatar
    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>



  2. Shinu
    Shinu avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lefteris
    Lefteris avatar
    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? 
  5. Shinu
    Shinu avatar
    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.
Back to Top