How do you 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, the client-side validation does not fire. 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 appropriately shows the validation error when the form is submitted, but the Kendo controls do not. Please let me know if there is a way to enable the client-side validation for these controls without having to manually wire it up.

A full example 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 a response on the Kendo forums, the reason the validation does not work is because jquery validate does not validate hidden fields by default. The easiest way to change that is to use the $.validate.setDefaults method to override that behavior like so:

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

This still does not add the "input-validation-error" class to the combo box or drop down, but at least it adds the validation error, and keeps the form from being submitted.