This is a migrated thread and some comments may be shown as answers.

Radeditor Required field validation problem

9 Answers 359 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Tamanna asked on 13 Aug 2012, 10:51 AM

Hi,

I am also using a radeditor. And facing a problem coz of the .
When I am removing whole text from radeditor and making it blank, still it shows presence of html text as ,   and

sometimes .

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 == ' ' || message1 == ' ') {

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.

9 Answers, 1 is accepted

answered on 04 Jan 2013, 09:18 AM

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

answered on 11 Jan 2013, 01:12 AM

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