How to enable ASP.Net MVC client validation for Kendo UI DropDownList and ComboBox?

Question

When I use the Kendo UI ComboBox and DropDownList controls in my MVC Razor views, client-side validation fails. Here is an example:

@using Kendo.Mvc.UI @model KendoDropDownTest.Models.TestModel @{ ViewBag.Title = "Kendo Drop Down and Combo Box Test"; } <h2>Kendo Drop Down and Combo Box Test</h2> @using (Html.BeginForm()) { @Html.ValidationSummary() <div> @Html.LabelFor(x => x.DropDownValue) @(Html.DropDownListFor(x => x.DropDownValue, Model.Options, "-- Select an Option --")) @Html.ValidationMessageFor(x => x.DropDownValue) </div> <fieldset> <legend>Kendo</legend> <div> @Html.LabelFor(x => x.KendoComboValue) @(Html.Kendo().ComboBoxFor(x => x.KendoComboValue) .BindTo(Model.Options.Select(x => x.Text))) @Html.ValidationMessageFor(x => x.KendoComboValue) </div> <div> @Html.LabelFor(x => x.KendoDropDownValue) @(Html.Kendo().DropDownListFor(x => x.KendoDropDownValue) .OptionLabel("-- Select an Option --") .BindTo(Model.Options)) @Html.ValidationMessageFor(x => x.KendoDropDownValue) </div> </fieldset> <input type="submit" value="Submit" /> } 

And the corresponding model:

 public class TestModel { [Required] public string DropDownValue { get; set; } [Required] public string KendoComboValue { get; set; } [Required] public string KendoDropDownValue { get; set; } public SelectListItem[] Options = new[] { new SelectListItem { Text = "Option 1", Value = "1" }, new SelectListItem { Text = "Option 2", Value = "2" }, new SelectListItem { Text = "Option 3", Value = "3" }, }; } 

The non-Kendo UI drop-down list accordingly displays a validation error when submitting the form, but Kendo controls do not. Please let me know if there is a way to activate client-side validation for these controls without having to manually connect it.

A complete sample solution is attached to the following Kendo forum post: http://www.kendoui.com/forums/mvc/dropdownlist/mvc-client-validation-not-working.aspx

Answer 1

Based on the answer on the Kendo forums, the reason why validation doesn't work is because, by default, jquery validation does not validate hidden fields. The easiest way to change this is to use the $ .validate.setDefaults method to override this behavior:

 $.validator.setDefaults({ ignore: "" }); 

This still does not add the "input-validation-error" class to the combo box or dropdown menu, but at least it adds a validation error and saves the form.

Answer 2

After many attempts, I came to the conclusion that checking ASP.NET MVC using jQuery unobtrusive js library and checking kendo are two different and incompatible animals. I plugged in the server and client side code to test the Multi-Select kendo control, but nothing really worked, including the setDefaults () method in the jQuery validator ($ .validator). I finally found this post http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/ and had to connect the kendo check separately, with a disclaimer that it does not integrate into the ASP.NET MVC validation summary control and in general the ASP.NET MVC validation API.

Here's a snippet of code to demonstrate what needs to be done. Again, there might be a cleaner and better approach. This snippet works in conjunction with the required validation attribute on the associated "SelectedIDs" property in my example on my ViewModel. "divCategories" is a div element containing a multi-select kendo control. Now this works for me until I get a cleaner approach:

 Html.Kendo().MultiSelectFor(m => m.SelectedIDs) .Name("SelectedIDs") .BindTo(CategoryItems) .HtmlAttributes(new { @class = "height100pc", @onchange= "$('#divCategories').kendoValidator().validate();" }) 

You can separate the embedded javascript in the script tag or in the javascript utility file anyway.

Good luck to anyone who goes this way.