An easy way to make an HTML TextArea more flexible is to use the Kendo UI Editor from Telerik. In addition, you can easily use Kendo UI within your MVC project thanks to their ASP.NET MVC wrappers that they provide for their tools. I’m not a huge fan of 3rd party toolkits, but for a quick solution, they can work pretty well.
I have an object set up using standard validation attributes on the properties, for example:
I needed the
Message property to be validated via jQuery Validation (it’s required after all). What in fact happened was that the user could happily submit the form without filling in the editor with a message. So much for the
[Required] doing anything, but it does work if you don’t use the Kendo UI Editor (e.g. if you just have a TextArea), so what’s up?
In this particular instance, I’m using a standard
kendoEditor method on your
TextArea and it yields a nice editor.
![Kendo UI Editor Example]
Check out more examples in the Kendo UI Editor demos.
display: none;), and therein lies the issue. By default jQuery Validation ignores hidden input fields. There are validation data-* attributes on the TextArea , but since it is hidden, when the unobtrusive validation fires, the editor is ignored.
The solution came when I discovered that jQuery validation ignores hidden fields by default. These default settings are defined as follows:
One option (as outlined in the release notes) would be to check ALL hidden inputs. To do this you can just pass an empty array to the
ignore property as illustrated in the following snippet, though this is not an ideal solution to the problem.
A much better approach as an alternative to the above method, is to explicitly force validation on the Kendo Editor by specifically excluding it from the jQuery ignore selector. My field happens to be wrapped in an element with a class of
kendo-editor, though you can use any option that works for you. You can get the validator of the form using jQuery and from there set the ignore settings. Utilizing jQuery’s
:not selector, we’re able to exclude the TextArea from the
Now with that simple bit of jQuery our validators will fire on the normal fields AND the Kendo UI Editor.