Radeditor Required field validation problem

[Tamanna]

Hi,

I am also using a radeditor. And facing a problem coz of the <br>.
When I am removing whole text from radeditor and making it blank, still it shows presence of html text as <br>, <p>&nbsp;</p> and

sometimes <p><br></p>.

I have a required field validator for this radeditor. When I enter any text in radeditor, the error message for this required radeditor is

disappearing only after a post back. But it should disappear as soon as we type any text in radeditor.
So I wrote a javascript for firing onblur event and explicitly hiding the error message if radeditor's content is not null.

I am calling the function using "OnClienLoad" :

<telerik:RadEditor ID="ContractExpirationAlertEditor" runat="server" Skin="Gray" OnClientLoad="DisableRequiredMessage"
                                        ToolsFile="~/Contracting/ToolsFile.xml" Width="100%" ContentFilters="None" OnTextChanged="ContractExpirationAlertEditor_TextChanged">
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="~/EditorContent.css" />
                                        </CssFiles>
</telerik:RadEditor>

Then in Javascript, function is like :

function DisableRequiredMessage(editor, args) {
var element = document.all ? editor.get_document().body : editor.get_document();
                $telerik.addExternalHandler(element, "blur", function(e) {
                    var editor1 = $find("ctl00_ContentPlaceHolder1_ContractExpirationAlertEditor");
                    var message1 = editor1.get_html();
if (message1 == '<br>' || message1 == '<p> </p>') {
                        alert(message1);
                        document.getElementById('ctl00_ContentPlaceHolder1_spnEmailBody').style.display = 'block';
                    }
                    else {
                        alert(message1);
                        document.getElementById('ctl00_ContentPlaceHolder1_spnEmailBody').style.display = 'none';
                    }
});
            }

I also tried to compare the length of the text in radeditor and hide and unhide the required error message :

var editor2 = $find("ctl00_ContentPlaceHolder1_ContractPendingEContractEditor");
                    var message2 = editor2.get_text();
if (message2.length > 1) {
                        //alert("Mozozozo" + message2.length);
                        document.getElementById('<%=spnContrPendngEmail.ClientID %>').style.display = 'none';
                    }
                    if (message2.length == 0 || message2.length == 1) {
                        //alert("Mozozozo");
                        document.getElementById('<%=spnContrPendngEmail.ClientID %>').style.display = 'block';
                    }

But it is not working in IE. When we type any text in radeditor ,I am able to hide the error message. But if we remove the text, we are
not getting the error message back. Thus required validation is not happening.

Please help me.

Thank You in advance.

[Rumen]

Hi,

You can attach to the keydown event or OnClientSelectionChange event and check whether the content area is empty. If it is empty show the error message.

Greetings,
Rumen
the Telerik team

[Pungkas Yoga]

Hi,

I got problem with asp:RequiredFieldValidator for RadEditor, but this only happen in IE (I'm using IE 9).
This is my code :

<telerik:RadEditor EditModes="Design" Height="250" Width="700" ID="txtBody" runat="server"
          ToolsFile="~/RadEditorTool.xml" Content='<%# Bind("Body") %>'>
          <CssFiles>
          <telerik:EditorCssFile Value="~/Styles/EditorContentArea.css" />
          </CssFiles>
</telerik:RadEditor>
<asp:RequiredFieldValidator ID="reqtxtBody" runat="server" ControlToValidate="txtBody"
           CssClass="FieldValidator" ErrorMessage="Body has to be set" ValidationGroup="save">
           <asp:Image ID="Image3" runat="server" AlternateText="error" ImageUrl="~/Images/exclamation12x12.gif"
           Width="12" Height="12" />
</asp:RequiredFieldValidator>

The validator doesn't work.
It seems like the ID "txtBody" is not attributed to the RadEditor. But I'm not sure.
Can you help me?

Regards,
Pungkas

[Nikolay]

Hi Pungkas,

I tried to reproduce the problem but without success. Could you please take a look at the following helping article: Using RadEditor with ASP.NET Validators?

Also, could you check the content which you bind to the RadEditor?

Regards,
Nikolay
the Telerik team

[Pungkas Yoga]

Hi Nikolay,

My problem has been answered in this post (I made a new thread) : http://www.telerik.com/community/forums/aspnet-ajax/editor/requiredfieldvalidator-for-radeditor-in-ie.aspx

When I removed the validationGroup, it works well. I use this approach for now, but I'll need the validation group. So, I still looking for another solution.

Thanks.

Regards,
Pungkas

[Rumen]

Hello Pungkas,

This problem should be fixed in the latest Q3 2012 SP2 build of RadControls for ASP.NET AJAX. Please, test it.

All the best,
Rumen
the Telerik team

[Pungkas Yoga]

Hi Rumen,

I'm using this version of telerik : 2012.3.1308.40
Is this not the same with the version you mention : the latest Q3 2012 SP2 build ?

Regards,
Pungkas

[Rumen]

Hi,

Q3 2012 SP2 is the release name of RadControls for ASP.NET AJAX with version 2012.3.1308.

Regards,
Rumen
the Telerik team

[Pungkas Yoga]

Hi Rumen,

Thanks for the information,
But unfortunately, the problem still exist. This is the full code, perhaps you can reproduce the error :

<%@ Page Title="Announcements Maintenance" Language="C#" AutoEventWireup="true" CodeBehind="AnnouncementsMaintenance.aspx.cs"
    Inherits="AnnouncementsMaintenance" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        <StyleSheets>
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.<%$ AppSettings:Telerik.Skin %>.Editor.<%$ AppSettings:Telerik.Skin %>.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.<%$ AppSettings:Telerik.Skin %>.Window.<%$ AppSettings:Telerik.Skin %>.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnRequestStart="EnableExportToCSV" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="HideShowFilter">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadButton ID="HideShowFilter" runat="server" OnClick="HideShowFilter_Click"
        Text='<% $Resources:StaticText,HideShowFilter %>'>
    </telerik:RadButton>
    <br />
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="False" AllowAutomaticInserts="True"
        AllowMultiRowEdit="False" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
        DataSourceID="DataSource1" GridLines="None" OnDataBound="RadGrid1_DataBound"
        PageSize="10" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True" ShowStatusBar="False"
        MasterTableView-InsertItemDisplay="Top" MasterTableView-ShowFooter="False" OnInit="RadGrid1_Init"
        OnItemCreated="RadGrid1_ItemCreated">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <ExportSettings IgnorePaging="true" />
        <MasterTableView DataKeyNames="AnnouncementId,RowVersion" DataSourceID="DataSource1"
            EditMode="PopUp" HorizontalAlign="NotSet" Width="100%" CommandItemDisplay="Bottom"
            OverrideDataSourceControlSorting="true">
            <CommandItemSettings ShowExportToCsvButton="False" ExportToCsvImageUrl="~/Images/export.gif" />
            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
            </RowIndicatorColumn>
            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" Reorderable="False" ShowSortIcon="False"
                    EditImageUrl="~/Images/edit.gif" UniqueName="EditCommandColumn" Visible="false">
                    <HeaderStyle ForeColor="DimGray" Width="20px" />
                    <ItemStyle HorizontalAlign="Center" />
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmDialogType="RadWindow"
                    ImageUrl="~/Images/delete.gif" ConfirmText="Delete this Announcement?" ConfirmTitle="Delete"
                    Text="Delete" UniqueName="DeleteColumn" Reorderable="False" ShowSortIcon="False"
                    Visible="false">
                    <HeaderStyle ForeColor="DimGray" Width="20px" />
                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                </telerik:GridButtonColumn>
                <telerik:GridTemplateColumn HeaderText="No." AllowFiltering="false">
                    <ItemTemplate>
                        <%#Container.DataSetIndex + 1%>
                    </ItemTemplate>
                    <HeaderStyle Width="30px" />
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="CreatedDate" HeaderText="Created" DataFormatString="{0:dd/MM/yyyy}">
                </telerik:GridDateTimeColumn>
                <%--<telerik:GridCheckBoxColumn DataField="Active" DefaultInsertValue="true" HeaderText="Active">
                    <HeaderStyle Width="20px" />
                </telerik:GridCheckBoxColumn>--%>
            </Columns>
            <EditFormSettings EditFormType="Template" InsertCaption="Add new Announcement" CaptionFormatString="Edit Announcement: {0}"
                CaptionDataField="AnnouncementId">
                <PopUpSettings Modal="true" ZIndex="7001" Width="850" />
                <FormTemplate>
                    <asp:Panel ID="Panel1" DefaultButton="btnSave" runat="server">
                        <table cellpadding="5" cellspacing="5">
                            <tr>
                                <td>
                                    Subject:
                                </td>
                                <td colspan="2">
                                    <telerik:RadTextBox ID="txtEditTitle" runat="server" Text='<%# Bind("Title") %>'
                                        Width="500">
                                    </telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ID="reqEditTitle" runat="server" ControlToValidate="txtEditTitle"
                                        CssClass="FieldValidator" ErrorMessage="Title has to be set" ValidationGroup="save">
                                        <asp:Image ID="Image2" runat="server" AlternateText="error" ImageUrl="~/Images/exclamation12x12.gif"
                                            Width="12" Height="12" />
                                    </asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr valign="top">
                                <td>
                                    Body:
                                </td>
                                <td>
                                    <telerik:RadEditor EditModes="Design" Height="250" Width="700" ID="txtBody" runat="server"
                                        ToolsFile="~/RadEditorTool.xml" Content='<%# Bind("Body") %>'>
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="~/Styles/EditorContentArea.css" />
                                        </CssFiles>
                                    </telerik:RadEditor>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtBody"
                                        CssClass="FieldValidator" ErrorMessage="Body has to be set" ValidationGroup="save">
                                        <asp:Image ID="Image3" runat="server" AlternateText="error" ImageUrl="~/Images/exclamation12x12.gif"
                                            Width="12" Height="12" />
                                    </asp:RequiredFieldValidator>
                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr valign="top">
                                <td>
                                    ExpiryDate:
                                </td>
                                <td colspan="2">
                                    <telerik:RadDatePicker ID="rdpExpiryDate" runat="server" ZIndex="7002" Visible="True"
                                        AutoPostBack="true" OnSelectedDateChanged="RdpExpiryDate_OnSelectedDateChanged">
                                        <DateInput ID="DateInput1" Enabled="true" runat="server">
                                        </DateInput>
                                    </telerik:RadDatePicker>
                                </td>
                            </tr>
                            <asp:Panel ID="panActive" runat="server" Visible='<%# (Container is GridEditFormInsertItem) ? false : true %>'>
                                <%--<tr>
                                    <td>
                                        Active:
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="Active" runat="server" Checked='<%# Bind("Active") %>' />
                                    </td>
                                </tr>--%>
                            </asp:Panel>
                            <tr>
                                <td colspan="3">
                                    <fieldset id="SummaryBox" runat="server" class="ValidationSummaryBox" visible="false">
                                        <legend class="ValidationSummaryBoxLegend">
                                            <asp:Image ID="Image1" runat="server" AlternateText="Validation Summary" ImageUrl="~/Images/warning32x32.png"
                                                Width="32" Height="32" />
                                        </legend>
                                        <asp:ValidationSummary EnableViewState="false" ID="ValidationSummary1" runat="server"
                                            CssClass="ValidationSummary" ValidationGroup="save" />
                                    </fieldset>
                                </td>
                            </tr>
                            <tr>
                                <td>

                                </td>
                                <td colspan="2">
                                    <telerik:RadButton ID="btnSave" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' ToolTip='<%# (Container is GridEditFormInsertItem) ? "Insert new Announcement?" : "Save the changes" %>'
                                        UniqueName="EditCommandColum" OnClick="BtnSave_OnClick">
                                    </telerik:RadButton>
                                    <telerik:RadButton ID="btnCancel" runat="server" CausesValidation="false" CommandName="Cancel"
                                        Text="Cancel" ToolTip="Cancel changes">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <ClientEvents OnPopUpShowing="CentrelizePopUp" />
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
    </telerik:RadGrid>
    <asp:ObjectDataSource SelectMethod="GetList" UpdateMethod="Update" InsertMethod="Insert"
        DeleteMethod="Delete" TypeName="Service.AnnouncementsMaintenanceService" ID="DataSource1"
        runat="server" OnUpdating="DataSource1_Updating" OnDeleting="DataSource1_Deleting"
        OnInserting="DataSource1_Inserting">
        <UpdateParameters>
            <asp:Parameter Name="t" Type="Object" />
        </UpdateParameters>
        <DeleteParameters>
            <asp:Parameter Name="t" Type="Object" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="t" Type="Object" />
        </InsertParameters>
    </asp:ObjectDataSource>
</asp:Content>

Thanks,
Regards,
Pungkas

[Rumen]

Hello,

Please, isolate the problem in a simple fully working project and send it via a support ticket along with steps to reproduce so that we can reproduce and debug it.

Kind regards,
Rumen
the Telerik team