asp.net mvc - Cannot display error message on Editor or EditorFor -
in mvc application, can display error messages inputs i.e. textboxfor
, dropdownlist
, etc. however, using same approach, cannot show validation error kendo().editor()
or kendo().editorfor()
. tried validationmessage
beside validationmessagefor
, not make sense. might problem be?
view:
<script type="text/javascript"> $(function () { //for using kendo validation: $("form").kendovalidator(); }); </script> //validation works 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 not work 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 .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
here generated html code inputs above. script field related button of 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 rendered html code of kendo().editor()
:
<td class="k-editable-area"> <iframe class="k-content" frameborder="0" title="editable area. press f10 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>
Comments
Post a Comment