In my MVC application, I can display the error messages for all the inputs i.e. TextBoxFor, DropdownList, etc. However, by using the same approach, I cannot show validation error for Kendo().Editor() or Kendo().EditorFor(). I tried with ValidationMessage beside ValidationMessageFor, but it does not make any sense. What might the problem be?
View:
<script type="text/javascript">
$(function () {
//For using Kendo Validation:
$("form").kendoValidator();
});
</script>
//Validation works for TextBoxFor, DropDownList, etc.:
@Html.LabelFor(m => m.Summary)
@Html.TextBoxFor(m => m.Summary, new { maxlength = 50, @class = "k-textbox"})
@Html.ValidationMessageFor(m => m.Summary)
//Validation DOES NOT work for Editor or EditorFor:
@Html.LabelFor(m => m.Description, new { maxlength = 1000, @class = "editor-label" })
@(Html.Kendo().Editor()
//@(Html.Kendo().EditorFor(m=>m.Description) //Also tried with this
.Name("Description")
.HtmlAttributes(new { @class = "editor-field" })
.Resizable()
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough().FontColor()
.JustifyLeft()
.JustifyCenter()
.JustifyRight()
.JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.TableEditing()
.CleanFormatting()
)
)
@Html.ValidationMessage("Description")
//@Html.ValidationMessageFor(m => m.Description) //Also tried with this
Here are the generated html code for the inputs above. The script field is related to the button of the editor:
<label for="Summary">Summary</label>
<input id="Summary" class="k-textbox k-invalid" type="text" value="" style="width:660px; " name="Summary" maxlength="50" data-val-required="Required field!.." data-val="true" aria-invalid="true">
<span id="Summary_validationMessage" class="val val-danger k-invalid-msg field-validation-error" data-for="Summary" data-valmsg-for="Summary" role="alert" style="display: inline;">
<label class="editor-label" maxlength="1000" for="Description">Description</label>
<table class="k-widget k-editor k-header k-editor-widget" cellspacing="4" cellpadding="0" role="presentation" style="width: 660px; height: 77px;" data-role="resizable">
<script>
jQuery(function(){jQuery("#Description").kendoEditor({"resizable":true,"tools":[{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"strikethrough"},{"name":"foreColor"},
{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"justifyFull"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},
{"name":"indent"},{"name":"createLink"},{"name":"unlink"},{"name":"createTable"},{"name":"addColumnLeft"},{"name":"addColumnRight"},{"name":"addRowAbove"},{"name":"addRowBelow"},
{"name":"deleteRow"},{"name":"deleteColumn"},{"name":"cleanFormatting"});
</script>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Description" style="display: none;"></span>
Update: Here is the rendered html code of Kendo().Editor():
<td class="k-editable-area">
<iframe class="k-content" frameborder="0" title="Editable area. Press F10 for toolbar." src="javascript:" "">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
(function (d, c) { d[c]('header'), d[c]('article'), d[c]('nav'), d[c]('section'), d[c]('footer'); })(document, 'createElement');
</script>
</head>
<body contenteditable="true" autocorrect="off">
<br class="k-br">
</body>
</html>
</iframe>
<textarea id="Description" class="editor-field k-content k-raw-content k-valid" style="width: 660px; height: 140px; display: none;" rows="5" name="Description" cols="20" data-role="editor" autocomplete="off"></textarea>
<div class="k-resize-handle">
<span class="k-icon k-resize-se"></span>
</div>
</td>