Enable Required Field Validator with AjaxManger

[Brian Goldman]

I doubt this is a Telerik component problem but maybe someone here has run across it and has the answer.

I have a form that has a Checkbox, 2 textareas, 2 required field validators, randscriptmanager and an radajaxmanager on it. The first required validator has it's enabled property set to false. If the user clicks the check box the code enables that validator. I have the radajazmanager set to update the validator on the checkbox click.

The problem is that it appears that the clientside validation for the first validator stops working after the ajax postback. The second validator, the one that was enabled the whole time works fine but the second one will not work until a normal post back occurs.

Hope fully that makes sense. Here is the code.

Partial Class valtest
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub uiCEUsOffered_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles uiCEUsOffered.CheckedChanged
        RequiredFieldValidator11.Enabled = uiCEUsOffered.Checked
        RequiredFieldValidator11.EnableClientScript = uiCEUsOffered.Checked
    End Sub
End Class

aspx code

<div>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="right" class="body-text-17" valign="top">
                    CEUs offered:
                </td>
                <td align="right" class="body-text-17">

                </td>
                <td align="left">
                    <asp:CheckBox ID="uiCEUsOffered" runat="server" Text="Yes"
                                  CssClass="body-text-17" AutoPostBack="True" />
                </td>
            </tr>
            <tr>
                <td colspan="3" align="right" class="body-text-17">
                    <img src="/images/spacer-transparent.gif" height="4">
                </td>
            </tr>
            <tr>
                <td align="right" class="body-text-17" valign="top">
                    if so, what type and information on how to register:
                </td>
                <td align="right" class="body-text-17">

                </td>
                <td align="left">
                    <asp:TextBox ID="uiCEUsRegisterInfo" runat="server" CssClass="field-resource-mission"
                                 Height="81px" TextMode="MultiLine"></asp:TextBox>

                    <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
                                                ControlToValidate="uiCEUsRegisterInfo" Enabled="False"
                                                ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td height="30" colspan="3" align="right" class="body-text-17">

                </td>
            </tr>
            <tr>
                <td align="right" class="body-text-17" valign="top">
                    what to bring:
                </td>
                <td align="right" class="body-text-17">

                </td>
                <td align="left">
                    <asp:TextBox ID="uiWhatToBring" runat="server" CssClass="field-resource-mission"
                                 Height="81px" TextMode="MultiLine"></asp:TextBox>

                    <asp:RequiredFieldValidator ID="Validator8" runat="server" Display="Dynamic"
                                                ErrorMessage="Required" ControlToValidate="uiWhatToBring"
                                                CssClass="validation-error" ForeColor=""></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td height="30" colspan="3" align="right" class="body-text-17">

                </td>
            </tr>
            <tr>
                <td align="right" class="body-text-17">

                </td>
                <td align="right" class="body-text-17">

                </td>
                <td align="left">
                    <asp:Button ID="uiSubmit" runat="server" Text="Submit" />

                    <asp:Button ID="uiCancel" runat="server" Text="Cancel" Visible="False" />
                </td>
        </tr>
        </table>
    <br />
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        EnablePageHeadUpdate="False">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="uiCEUsOffered">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RequiredFieldValidator11"
                                    UpdatePanelRenderMode="Inline" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
            <br />
<br />
<br />
    <br />
   </div>

Any help would be greatly appreciated. Thanks

Brian

[Iana Tsolova]

Hello Brian,

To overcome that issue, try wrapping the RequiredFieldValidator into an ASP:Panel and add it instead to the updated control collection:

<asp:Panel runat="server" ID="Panel1" style="display:inline-block">
    <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="uiCEUsRegisterInfo"
        Enabled="False" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="False">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uiCEUsOffered">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelRenderMode="Inline" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Sincerely yours,
Iana
the Telerik team

[Brian Goldman]

Thank you. I had searched for a solution on the web and everything I read said take the control out of the ajax panel to fix it so I never even tried adding a ajax panel to my code. Your solution worked.

[Brian]

Sorry to bring up a old post

 

but just looking at this solution (I ran into a similar issue and again this solution worked )

 

Why does this work ? (rewrapping the validator around a panel )

 

Just trying to understand the inner workings here 

 

 

[Maria Ilieva]

Hello,

Generally this approach is required for scenarios where Validation Summary is used. See the topic below:
http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/troubleshooting/known-limitations

Regards,
Maria Ilieva
Telerik by Progress

[Rayne]

Again, pulling up an old thread but...

I've wrapped my controls and validators in an ASP Panel and my validators are working now (error messages are showing up), but the button is still posting. I don't want the button to post if a required field is blank.