This is a migrated thread and some comments may be shown as answers.

MVC Client Validation not working

6 Answers 2651 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 06 Sep 2012, 06:52 PM
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.

6 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 10 Sep 2012, 12:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrii
Top achievements
Rank 1
answered on 24 May 2013, 05:15 AM
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!
0
Atlas
Top achievements
Rank 1
answered on 10 Oct 2013, 10:48 PM
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.
0
Georgi Krustev
Telerik team
answered on 11 Oct 2013, 09:18 AM
Hello,

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

Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 03 Nov 2014, 03:23 PM
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? 
0
Georgi Krustev
Telerik team
answered on 05 Nov 2014, 10:33 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
DropDownList
Asked by
Jason
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Andrii
Top achievements
Rank 1
Atlas
Top achievements
Rank 1
Jacques
Top achievements
Rank 2
Share this question
or