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

Criticaster

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.

Criticaster

For jQuery Validate 1.9, you have to set ignore to an empty array. – Marquesan

Found a great addition to this. If you have other controls that you want to not be validated if hidden, but want the specific controls to be hidden, you can add them to not(ignore) to expand this useful tip: For example, we put a .kendoDD tag on the Kendo Dropdown, and then set: $.validator.setDefaults({ ignore: ":hidden:not(.kendoDD)" }); #20288067 – Navigate

to add to @mike 's comment, one can also use :hidden:not([data-role='dropdownlist']). That data role is already there, so there's no need to add any tag – Mireille

Answer 2

After trying a lot of things, I have come to a conclusion that ASP.NET MVC validation with jQuery unobtrusive js library and kendo validation are two different and incompatible beasts. I wired up server side and client side code for validating a kendo Multi-Select control, but nothing really worked including the setDefaults() method on 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 hook up kendo validation separately, with the caveat that it does not integrate into ASP.NET MVC validation summary control and in general ASP.NET MVC validation API.

Here's the code snippet to demonstrate what had to be done. Again, there could be a cleaner and a better approach. This snippet works in conjunction with a Required validation attribute on the bound property "SelectedIDs" in my example, on my ViewModel object. "divCategories" is the div element containing the kendo multi-select control. This one works for me now, till I get a cleaner approach:

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

You could separate the inline javascript into a script tag or into a utility javascript file anyways.

Good luck to whoever treads this path..

Ingenious

Answer 3

It will be better to use this script:

<script>
    $(function () {
        $("form").kendoValidator();
    });
</script>

You can make reference to this link.

http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/

Teenateenage

This is by far the easiest way to resolve this issue - awesome work. 👊 – Myalgia