Radeditor Required field validation problem

10 posts, 0 answers
  1. Tamanna
    Tamanna avatar
    7 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    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.
  2. Rumen
    Admin
    Rumen avatar
    14081 posts

    Posted 14 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Pungkas Yoga
    Pungkas Yoga avatar
    8 posts
    Member since:
    Nov 2012

    Posted 04 Jan 2013 Link to this post

    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
  4. Nikolay
    Admin
    Nikolay avatar
    94 posts

    Posted 07 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Pungkas Yoga
    Pungkas Yoga avatar
    8 posts
    Member since:
    Nov 2012

    Posted 07 Jan 2013 Link to this post

    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
  6. Rumen
    Admin
    Rumen avatar
    14081 posts

    Posted 09 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Pungkas Yoga
    Pungkas Yoga avatar
    8 posts
    Member since:
    Nov 2012

    Posted 09 Jan 2013 Link to this post

    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
  8. Rumen
    Admin
    Rumen avatar
    14081 posts

    Posted 10 Jan 2013 Link to this post

    Hi,

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

    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Pungkas Yoga
    Pungkas Yoga avatar
    8 posts
    Member since:
    Nov 2012

    Posted 10 Jan 2013 Link to this post

    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
  10. Rumen
    Admin
    Rumen avatar
    14081 posts

    Posted 11 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top