Adding a Maximum Length Validation to the Editor

Environment

Product	Telerik UI for ASP.NET MVC Editor
Progress Telerik UI for ASP.NET MVC version	2024.4.1112

Description

How can I validate that the value of the Editor does not exceed a pre-defined maximum length?

Solution

To validate the Editor value, use the Kendo UI for jQuery Validator component with custom validation rules.

1. Set the data_maxtextlength and data_maxtextlength_msg attributes through the HtmlAttributes option of the Editor.
2. Extend the Validator with custom rules.

Razor

    <form>
        @(Html.Kendo().Editor()
            .Name("editor")
            .HtmlAttributes(new { data_maxtextlength="50", data_maxtextlength_msg="Text must be shorter than 50 chars" })
            .Value("Lorem ipsum dolor sit amet. Lorem ipsum dolor sit.")
        )

        <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">Submit</button>
    </form>

Html

    <script>
        // Register custom validation rules.
        (function ($, kendo) {
            $.extend(true, kendo.ui.validator, {
                rules: {
                    maxTextLength: function (textarea) {
                        if (textarea.is("[data-maxtextlength-msg]") && textarea.val() != "") {
                            var maxlength = textarea.attr("data-maxtextlength");
                            var value = textarea.data("kendoEditor").value();
                            return value.replace(/<[^>]+>/g, "").length <= maxlength;
                        }

                        return true;
                    },
                    maxHtmlLength: function (textarea) {
                        if (textarea.is("[data-maxhtmllength-msg]") && textarea.val() != "") {
                            var maxlength = textarea.attr("data-maxhtmllength");
                            var value = textarea.data("kendoEditor").value();
                            return value.length <= maxlength;
                        }

                        return true;
                    }
                }
            });

            $("form").kendoValidator();
        })(jQuery, kendo);
    </script>

More ASP.NET MVC Editor Resources

• ASP.NET MVC Editor Documentation

• ASP.NET MVC Editor Demos

• ASP.NET MVC Editor Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Editor for ASP.NET MVC

• Server-Side API Reference of the Editor for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base