Adding a Maximum Length Validation to the Editor
Environment
| Product | Telerik UI for ASP.NET Core Editor |
| Progress Telerik UI for ASP.NET Core 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.
- Set the
data_maxtextlengthanddata_maxtextlength_msgattributes through theHtmlAttributesoption of the Editor. - Extend the Validator with custom rules.
<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>
<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>