RadEditor - Required field validator

[Bader]

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

[Rumen]

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

[Armando]

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);
}

[Satbir]

Hi Rumen,

I am trying to use the above code, it's working fine for "click" but not for "blur"

[Ianko]

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

 

 

[Satbir]

Thanks Lanko !!

This is working now