RadEditor - Required field validator

6 posts, 0 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 27 Oct 2011 Link to this post

    Hi,

    Baed on http://demos.telerik.com/aspnet-ajax/editor/examples/validators/defaultcs.aspx, how can I hide the required filed validator of RadEditor immediately after filling the content and clicking out of it, without clicking on the "Submit" button? exactly like the required filed validators of other controls in the form.

    Regards,
    Bader
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 28 Oct 2011 Link to this post

    Hello Bader,

    You can attach to the blur event of the content area of RadEditor and execute your own validation code. You can see how to attach to the editor's content area events in this article: attachEventHandler.

    For example:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="checkLength"></telerik:RadEditor>
    <script type="text/javascript">
        var limitNum = 50;
     
        function checkLength(editor, args) {
             
            var element = document.all ? editor.get_document().body : editor.get_document();
            $telerik.addExternalHandler(element, "blur", function (e) {
                if (editor.get_text().length > limitNum) {
                    alert("The text length should not exceed " + limitNum + " symbols.");
                    editor.setFocus();
                }
            });
        
    </script>


    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Armando
    Armando avatar
    3 posts
    Member since:
    Dec 2010

    Posted 06 Feb 2012 Link to this post

    Hi, I use too the RadEditor control. In my case this is my control code

    <telerik:RadEditor ID="RadEditorSumario" runat="server" Skin="Office2007" SpellCheckSettings-DictionaryLanguage="es-ES"
    Width="400px" ContentFilters="None" NewLineBr="true">
    <Tools>
    <telerik:EditorToolGroup>
    <telerik:EditorTool Name="Bold" />
    <telerik:EditorTool Name="Italic" />
    <telerik:EditorTool Name="Underline" />
    <telerik:EditorTool Name="LinkManager" />
    <telerik:EditorTool Name="StrikeThrough" />
    <telerik:EditorTool Name="Undo" />
    <telerik:EditorTool Name="Redo" />
    <telerik:EditorTool Name="InsertOrderedList" />
    <telerik:EditorTool Name="InsertUnorderedList" />
    <telerik:EditorTool Name="JustifyLeft" />
    <telerik:EditorTool Name="JustifyCenter" />
    <telerik:EditorTool Name="JustifyRight" />
    <telerik:EditorTool Name="JustifyFull" />
    <telerik:EditorTool Name="PastePlainText" />
    <telerik:EditorTool Name="PasteAsHtml" />
    <telerik:EditorTool Name="AjaxSpellCheck" />
    </telerik:EditorToolGroup>
    </Tools>
    </telerik:RadEditor>
    <asp:CustomValidator ID="cvSumario2" runat="server" ControlToValidate="RadEditorSumario"
    Text="(*)" ErrorMessage="Debe ingresar el sumario o descripción del pillate la foto"
    ForeColor="Red" ClientValidationFunction="ValidarCampoObligatorioRegEx" />


    I resolved the problem with this javascript

    function ValidarCampoObligatorioRegEx(source, args) {
    var pattern = "^(<br>|<br/>|<BR>|<BR/>|&nbsp;|\\s)*$";
    var regex = new RegExp(pattern);
    var text = args.Value;
    var doMatch = text.match(regex);
    args.IsValid = !(doMatch);
    }
  5. Satbir
    Satbir avatar
    4 posts
    Member since:
    Apr 2014

    Posted 09 Jun 2014 in reply to Rumen Link to this post

    Hi Rumen,

    I am trying to use the above code, it's working fine for "click" but not for "blur"
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Jun 2014 Link to this post

    Hello Satbir,

    Due to browser differences, the blur event is not propagating through the body element, but the document. In IE11 and Chrome the blur attached to the body does not work as expected, and you can use the focusout event handler instead. Note that under IE10 and less both event handlers are being raised.

    Example:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="checkLength">
    </telerik:RadEditor>
     
    <script type="text/javascript">
        var limitNum = 50;
     
        function checkLength(editor, args) {
            var element = document.all ? editor.get_document().body : editor.get_document();
     
            if ($telerik.isFirefox) {
                $telerik.addExternalHandler(element, "blur", validateLength);
            } else {
                $telerik.addExternalHandler(element, "focusout", validateLength);
            }
        }
     
        function validateLength(e) {
            var editor = $find("<%= RadEditor1.ClientID %>");
     
            if (editor.get_text().length > limitNum) {
                alert("The text length should not exceed " + limitNum + " symbols.");
                editor.setFocus();
            }
        }
    </script>


    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Satbir
    Satbir avatar
    4 posts
    Member since:
    Apr 2014

    Posted 11 Jun 2014 in reply to Ianko Link to this post

    Thanks Lanko !!

    This is working now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017