MVC Client Validation not working

[Jason]

There appears to be a problem using the Kendo ComboBox and DropDownList along with the client-side MVC unobtrusive validation. The validation errors do not appear on the client. Take the following Razor view for 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" />

}

The non-Kendo UI drop down appropriately shows the validation error when the form is submitted, but the Kendo controls do not. The model is very simple and uses attributes for validation:

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"

        },

    };

}

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 solution which reproduces the issue is attached.

[Georgi Krustev]

Hello Jason,

 
The problem is caused by the jQuery validate itself. By default hidden inputs are not validated and as you probably know the DropDownList's value is placed in a hidden input element (check ignore option).
For your convenience I have attached a simple test project, which shows how to use the  DropDownList/ComboBox widget along with jQuery validate.

Kind regards,
Georgi Krustev
the Telerik team

[Andrii]

Hi! In your test project used not jquery.validate, but used ".kendoValidator().data("kendoValidator");"
But can you tell is it possible to combine Kendo Combobox and client-side mvc unobtrusive jquery validation?
Thanks!

[Atlas]

Hi Georgi Krustev,
I downloaded the solution you provided. It won't open in VS 2010 or VS2012. I tried both the project and the solution files.
Can you please post a working solution?

It is actually the MVC.Kendo project that won't load.

[Georgi Krustev]

Hello,

 
I will suggest you check this repository, which shows how to validate Kendo input widgets.

Regards,
Georgi Krustev
Telerik

[Jacques]

Hi Georgi, 

I've just downloaded the project created on this thread which didn't work, then I downloaded the project from the GitHub repo, both don't work. 

What I want to know: Are Kendo Widgets MEANT to work with MVC and unobtrusive validation? 

[Georgi Krustev]

Hi Jacques,

Kendo UI for ASP.NET MVC is meant to work with ASP.NET MVC Unobtrusive validation. This screencast tests the very same code library that I mentioned in my previous reply. As you can see the unobtrusive validation attributes are rendered and the validation messages are shown.
Let me know what does not work at your end.

Regards,
Georgi Krustev
Telerik