Kendo UI

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.

Today’s post will discuss an issue that I encountered regarding the Kendo UI Editor coupled with jQuery Validation. Little nagging things like the one I encountered will surely annoy other developers, so I hope this post helps. This issue most likely applies to other types of JavaScript editors (most I would suspect) that work in a similar fashion to the Kendo UI Editor. If you’re having an issue where jQuery Validations aren’t firing with another editor (e.g. TinyMCE, CKEditor, etc.), I would recommend you review this post.

Before we go any further: I’m not saying “Go out and buy Kendo UI” with this post; there’s no incentive in endorsing the product. Of course if Telerik wants to provide me with a free license, you know, that would be cool ;) Anyway, as I mentioned before, I’m not a huge fan of 3rd party tools. I happen to be using them for a specific client and I have encountered various issues, one of which is outlined in this post. If I were using another JavaScript WYSIWYG editor on this project, I’d be specifically discussing that one.

Background

I’m working on an ASP.NET MVC 4 project. With that, I have unobtrusive validation set up using Microsoft.jQuery.Unobtrusive.Validation (which uses jQuery Validation). I’m using Kendo UI using straight JavaScript, but also the ASP.NET MVC Kendo UI Wrappers, where it makes things easier.

Problem

I have an object set up using standard validation attributes on the properties, for example:

public class Email {
    [Required]
    public string Message { get; set; }
}

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 @Html.TextAreaFor(m => m.Message). I’m then taking and setting up the Kendo Editor using JavaScript. It’s pretty trivial to set up, you just call the kendoEditor method on your TextArea and it yields a nice editor.

![Kendo UI Editor Example][4]

Check out more examples in the Kendo UI Editor demos.

If you look at what the Kendo UI Editor does, it creates a different editor than just a TextArea . In order to display the HTML, they need to do this as the TextArea doesn’t render anything but text. Other JavaScript editors work in a similar fashion. The actual TextArea is hidden using CSS (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.

Solution

The solution came when I discovered that jQuery validation ignores hidden fields by default. These default settings are defined as follows:

$.validator.setDefaults({ ignore: ':hidden' });

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.

$.validator.setDefaults({ ignore: []});

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 :hidden selector.

$("form").data("validator").settings.ignore = ":hidden:not(.kendo-editor textarea)";

Now with that simple bit of jQuery our validators will fire on the normal fields AND the Kendo UI Editor.

[4]https://images.visoftinc.com/2013-01-14/fig01.png