RadEditor Client side validation in UI for ASP.NET AJAX General Discussions

Shrikant Kale

20 posts

Member since:
Oct 2009

Posted 05 Jan 2010 Link to this post

Hi All,

I am facing problems with client side validation of RadEditor.
I want to put a check on length of the string entered in editor.

Following is the code, I have written:

    
            ========ASPX======== 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1"> 
        
                <script type="text/javascript" language="javascript"> 
        
                function ValidateEditor() 
        
                { 

                    alert($find("<%=editor1.ClientID %>").get_text().length); 
        
                    alert($find("<%=editor1.ClientID %>").get_html().length); 
        
                    alert($find("<%=editor1.ClientID %>").get_html(true).length); 
        
                } 
        
                function ValidateEditor1(sender, args) 
        
                { 
        
                    alert("args.Value.length = "+args.Value.length); 
        
                } 
        
                </script> 
        
                </telerik:RadScriptBlock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <div> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <asp:CustomValidator ID="val1" Display="None" runat="server" ClientValidationFunction="ValidateEditor" 
        
                        ValidationGroup="group1"></asp:CustomValidator> 
        
                    <asp:CustomValidator ID="CustomValidator1" Display="None" runat="server" ClientValidationFunction="ValidateEditor1" 
        
                        ValidationGroup="group1" ControlToValidate="editor1"></asp:CustomValidator> 
        
                    <telerik:RadEditor ID="editor1" runat="server" Width="400" Height="100" 
        
                        Skin="Vista" EditModes="Design"> 
        
                        <Tools> 
        
                            <telerik:EditorToolGroup> 
        
                                <telerik:EditorTool Name="Bold" /> 
        
                                <telerik:EditorTool Name="Italic" /> 
        
                                <telerik:EditorTool Name="Underline" /> 
        
                                <telerik:EditorTool Name="InsertOrderedList" /> 
        
                                <telerik:EditorTool Name="InsertUnorderedList" /> 
        
                                <telerik:EditorTool Name="Indent" /> 
        
                                <telerik:EditorTool Name="Outdent" /> 
        
                                <telerik:EditorTool Name="JustifyLeft" /> 
        
                                <telerik:EditorTool Name="JustifyCenter" /> 
        
                                <telerik:EditorTool Name="JustifyRight" /> 
        
                            </telerik:EditorToolGroup> 
        
                        </Tools> 
        
                    </telerik:RadEditor> 
        
                    <asp:Button Text="SAVE" ID="button16" OnClick="Save_Click" 
        
                        runat="server" ValidationGroup="group1" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            ========CODE BEHIND======== 
        
                public partial class EditorValidation : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                    } 
        
                    protected void Save_Click(object sender, EventArgs e) 
        
                    { 
        
                        int len = editor1.Content.Length; 
        
                    } 
        
                }

To put check on length, I used function get_html() and get_text(). But length of string returned by these function is sometimes smaller than length of server side attribute "Content".
Then I found online demo(http://demos.telerik.com/aspnet-ajax/editor/examples/validators/defaultcs.aspx) which had implementation like function "ValidateEditor1". But that also returned smaller length.

I observed that this problem consistently occurs with strings spanning over multiple lines. You can try this by entering any multi-line string in the editor.

So I think I will be able to solve this problem if I find some api on client side, which returns string exactly equal to the one returned by server side attribute "Content". Can anyone provide more insight into this problem?

Regards
Shrikant

Rumen

Admin

14421 posts

Posted 06 Jan 2010 Link to this post

Hi Shrikant,

I am aware of a similar problem which is due to the editor's content area indentation filter which adds a lot of spaces to nicely indent the content in HTML mode. Could you please disable this filter with the codebehind code below and see whether this will solve the problem on your side:

RadEditor1.DisableFilter(EditorFilters.IndentHTMLContent);

Please note also that in the Q3 2009 build of RadEditor for ASP.NET AJAX we introduced two new properties MaxTextLenght and MaxHTMLLength to limit content size. You can use the MaxTextLenght property in your scenario.

The MaxTextLength and MaxHtmlLength properties check the character length only when submitting the content. We decided to implement them in this means because if we check the content length on paste and / or on onkeydown then this will decrease performance and will slow down the typing / editing of large content. This is how these properties are implemented in our competitors' web editors as well.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Shrikant Kale

20 posts

Member since:
Oct 2009

Posted 06 Jan 2010 Link to this post

Hi Rumen ,

Thanks a lot for reply.

Disabling filter solved my problem it removed the extra characters. Now client side method get_content() and server side attribute Content return same string.

I also tried using MaxHTMLLength, it worked well. However it shows alert when string exceeds the limit. Is there any way to customize this behavior. I want to show the error message on same page without any popups(the way validators show error message).

Regards
Shrikant

Rumen

Admin

14421 posts

Posted 06 Jan 2010 Link to this post

Hi Shrikant,

Here is an example demonstrating how to override the displayMaxTextLengthErrorMessage function and display the error message in a DIV element:

<telerik:RadEditor MaxTextLength="10" runat="server" ID="RadEditor1"></telerik:RadEditor>

<div id="counter"></div>

<script type="text/javascript">

Telerik.Web.UI.RadEditor.prototype.displayMaxTextLengthErrorMessage = function()

{

var editor = $find("<%=RadEditor1.ClientID%>");

$get("counter").innerHTML = "You are not allowed to type more than " + editor.get_maxTextLength() + " symbols";

}

</script>

<asp:Button ID="btn_test" Text="Test" runat="server" />

When the MaxHtmlLength property is set then you should override the displayMaxHtmlLengthErrorMessage function.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Shrikant Kale

20 posts

Member since:
Oct 2009

Posted 07 Jan 2010 Link to this post

Hi Rumen,

I am facing client side validation issue again. Disabling filter solved my problem for some cases. But I still get this problem in some cases.

I am describing my problem again, functions get_html() and get_html(true) are returning me smaller string than the one returned by server side attribute "Content".
Because of this my client side validations pass but data gets truncated while storing in database.

So is there any way by which I can get string on client side, which will be exactly same as server side attribute "Content"?

Regards
Shrikant

Rumen

Admin

14421 posts

Posted 07 Jan 2010 Link to this post

Hi Shrikant,

You can try to disable all content filters of RadEditor by setting ContentFilters="None" and see whether this will fix the problem.

If you still experience any issues, please open a support ticket and send a sample working project along with sample content that demonstrates the issue. I will debug the project and try to provide a solution.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Siddharth Macwan

11 posts

Member since:
Oct 2009

Posted 11 Aug 2010 Link to this post

Hi,

I have our company's client managing the HTML content using Microsoft EPM (SharePoint) Rich text Editor.

Some times the HTML is invalid and out of the reach of any telerik Editor filters to validate the same..

when we load this content in our Application using RAD editior to export to PDF.. I tried all the formate strippers (cant use CSS striping as we need the styles to be maintained in PDF) I m sure that somewhere the invalid HTML that hinders the Export.. say out of 100 reports only 6 report has this export problem due to invalid HTML tagging...

is there a way where we can do the HTML/XHTML validation of the Editor Content - Server side or Client side so that I can export the Editor Content to PDF?

Thanks

Sid

Rumen

Admin

14421 posts

Posted 16 Aug 2010 Link to this post

Hello Siddharth,

The RadEditor's content filters could not guarantee the production of 100% valid XHTML content, because it is very easy to paste non well formed content in RadEditor. While the Telerik RadEditor can compensate and automatically convert many of non-valid XHTML tags and attribute, the responsibility for producing valid XHTML compliant content is partially on the side of the user. That is why, we strongly suggest the use of the integrated XHTML Validator dialog for the timely discovery and correction of non-compliant content.

You can find more detailed information in this help article: XHTML Compliance.

Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Charan

2 posts

Member since:
Jan 2016

Posted 23 Feb 2016 Link to this post

Hi

I have similar problem I am validating Rad editor with requiredfieldvalidator here the problem is on button click validator is validating the but it is not blockinmg the post back of data.

Ianko

Admin

1945 posts

Posted 25 Feb 2016 Link to this post

Hi Charan,

Take a look at this demo—
http://demos.telerik.com/aspnet-ajax/editor/examples/validators/defaultcs.aspx.

Regards,

Ianko
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items