kendo validation does not work the second time

[BRAD]

I have a page where i use MVC validation when I click on submit on my form.  basically it uses:

@using (Html.BeginForm("InsertData", "DataPage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(false, "Insert Data unsuccessful.")
...

one of the fields inside this form is:

@Html.Kendo().DropDownListFor(m => m.DType).BindTo(Models.DType.GetDTypes())

This DType business object has the [Required] data attribute on it,and it works great the first time.  If i select a DType from the dropdown, then the submit works fine.  if i don't select it, then i get a validation error in the summary above telling me i need to enter a value.

Great, no problems so far.  The problem though is now i have a validation error, so i correct it on the form by selecting a DType.  This does nothing.  I click submit, it tells me i still haven't entered a DType value.  Putting a breakpoint in the controller confirms that it's not recieving a DType value, despite the fact that i selected one.

If i change the dropdown to a basic @Html.DropDownListFor ... , it works fine, so i know the problem is with the kendo control.  What am I doing wrong here, and how can i fix it?  
Thanks

[Daniel]

Hi,

Could you check the attached sample project and let me know if it is working as expected or if I am missing something?

Regards,
Daniel
Telerik

 

 

[Bobby]

I am encountering the same issue as Brad.  While the issue doesn't seem to happen in Daniel's sample project, it is also not quite the same use case.  I was going to attach a sample project to this post that does repro the issue, but I can't get around the 2MB file size limit.  Therefore, I've copy/pasted the controller / view that repros the issue to the end of my post.

The issue seems to present itself when the dataset used to populate the drop down already contains a default item rather than using the DropDownListFor().OptionLabel() method to specify the default unselected text.  This then requires the controller action to verify that the default item isn't chosen and manually add a ModelState.AddModelError() when it is.  This combination makes it impossible to successfully submit the form with a valid selected item after attempting to submit it with the default item selected as for whatever reason the Telerik DropDownList field stops being included in the HttpPost request data.

01.namespace TelerikValidationRepro.Models
02.{
03.    public class MyListItem
04.    {
05.        public int ItemID { get; set; }
06.        public string ItemName { get; set; }
07.    }
08.    public class ReproViewModel
09.    {
10.        [Required]
11.        public int? SelectedID { get; set; }
12.
13.        public IEnumerable<MyListItem> MyListItems { get; set; }
14.    }
15.}
16.
17.namespace TelerikValidationRepro.Controllers
18.{
19.    public class ReproController : Controller
20.    {
21.
22.        // GET: Repro
23.        public ActionResult Index()
24.        {
25.            ReproViewModel viewModel = new ReproViewModel
26.            {
27.                MyListItems = new List<MyListItem>{
28.                    new MyListItem {ItemID = 0, ItemName = "-- Select Item --"},
29.                    new MyListItem {ItemID = 1, ItemName = "First Item"},
30.                    new MyListItem {ItemID = 2, ItemName = "Second Item"},
31.                    new MyListItem {ItemID = 3, ItemName = "Third Item"},
32.                    new MyListItem {ItemID = 4, ItemName = "Fourth Item"},
33.                    new MyListItem {ItemID = 5, ItemName = "Fifth Item"},
34.                    new MyListItem {ItemID = 6, ItemName = "Sixth Item"},
35.                }
36.            };
37.
38.            return View(viewModel);
39.        }
40.
41.        [HttpPost]
42.        public ActionResult Index(ReproViewModel postedViewModel)
43.        {
44.            ActionResult result = null;
45.
46.            if (!postedViewModel.SelectedID.HasValue || (postedViewModel.SelectedID.HasValue && postedViewModel.SelectedID.Value == 0))
47.            {
48.                ModelState.AddModelError("SelectedID", "Please select a valid item.");
49.            }
50.
51.            if (ModelState.IsValid)
52.            {
53.                result = RedirectToAction("Index", "Home");
54.            }
55.            else
56.            {
57.                postedViewModel.MyListItems = new List<MyListItem>{
58.                    new MyListItem {ItemID = 0, ItemName = "-- Select Item --"},
59.                    new MyListItem {ItemID = 1, ItemName = "First Item"},
60.                    new MyListItem {ItemID = 2, ItemName = "Second Item"},
61.                    new MyListItem {ItemID = 3, ItemName = "Third Item"},
62.                    new MyListItem {ItemID = 4, ItemName = "Fourth Item"},
63.                    new MyListItem {ItemID = 5, ItemName = "Fifth Item"},
64.                    new MyListItem {ItemID = 6, ItemName = "Sixth Item"},
65.                };
66.
67.                result = View(postedViewModel);
68.            }
69.
70.            return result;
71.        }
72.    }
73.}

01.@model TelerikValidationRepro.Models.ReproViewModel
02.
03.@{
04.    ViewBag.Title = "Index";
05.}
06.
07.<h2>Index</h2>
08.<h3>
09.    Redirects back to main home page if form post is successful.
10.</h3>
11.
12.@using (Html.BeginForm())
13.{
14.    @Html.ValidationSummary(true)
15.
16.    <div class="form-group">
17.        @Html.LabelFor(model => model.SelectedID)
18.        @(Html.Kendo().DropDownListFor(model => model.SelectedID)
19.            .DataTextField("ItemName")
20.            .DataValueField("ItemID")
21.            .BindTo(Model.MyListItems)
22.        )
23.        @Html.ValidationMessageFor(model => model.SelectedID)
24.    </div>
25.
26.    <div class="form-group">
27.        @(Html.Kendo().Button()
28.            .Name("SubmitButton")
29.            .Content("Submit")
30.        )
31.    </div>
32.}
33.
34.@section scripts {
35.    @Scripts.Render("~/bundles/jqueryval")
36.
37.    <script>
38.        $.validator.setDefaults({
39.            ignore: ""
40.        });
41.
42.        jQuery.extend(jQuery.validator.methods, {
43.            date: function (value, element) {
44.                return this.optional(element) || kendo.parseDate(value) !== null;
45.            },
46.            number: function (value, element) {
47.                return this.optional(element) || kendo.parseFloat(value) !== null;
48.            }
49.        });
50.    </script>
51.
52.}

[Daniel]

Hello Bobby,

The reason and the possible solutions for this problem are described here. Because of the class the dropdwonlist will be removed by the validation and the value will not be submitted.

Regards,
Daniel
Telerik

 

 

[Bobby]

Thanks for pointing me in the direction on how to resolve the issue.

Instead of requiring the developer to manually add

1.$(document).ready(function () {
2.    $(".k-widget").removeClass("input-validation-error");
3.});

on every form that might have a server validation error, wouldn't it be easier if the Telerik Widgets simply didn't copy the special "input-validation-error" class from the input to the widget wrapper?

[Daniel]

Hello again,

We have considered this but we are reluctant to include logic specific to MVC in the core scripts. Nevertheless, I have logged an issue in our system and we will discuss this problem again.

Regards,
Daniel
Telerik

 

 

[Bobby]

[quote]
We have considered this but we are reluctant to include logic specific to MVC in the core scripts. Nevertheless, I have logged an issue in our system and we will discuss this problem again.
[/quote]

Wouldn't it be logic specifically targeting integration with the jQuery Validation javascript library rather than MVC itself (a subset of jQuery Validation users)?  This would give more justification to include it in the core scripts as a user could be using both kendo and jQuery Validation without using MVC.  Either way, thanks for at least considering it.

[BRAD]

Thanks Bobby for the help.  i was beating my head trying to figure out why the sample code worked fine for me, but not in my actual app!

[Daniel]

Hi,

Actually, the class is specific to MVC. It is rendered by the helpers and is used by the jQuery validation because of the unobtrusive validate script.

Regards,
Daniel
Telerik

 

 

[Jeff]

Is there a way to follow the conclusion of this issue? Is there a URL I can go to in order to subscribe to the issue? I am currently unable to use this code to work around the issue.

 

$(document).ready(function () {
    $(".k-widget").removeClass("input-validation-error");
});

 

Hello again,

We have considered this but we are reluctant to include logic specific to MVC in the core scripts. Nevertheless, I have logged an issue in our system and we will discuss this problem again.

Regards,
Daniel 
Telerik

[Georgi Krustev]

Hello Jeff,

I would suggest you follow our public Github repository to see our logged issues/enhancements. You can also follow our UserVoice account. All future suggestion can be found there.

Those two links are the places where you can track whether one issue is going to be resolved or not.

Regards,
Georgi Krustev
Telerik