kendo validation does not work the second time

11 posts, 1 answers
  1. BRAD
    BRAD avatar
    27 posts
    Member since:
    May 2012

    Posted 19 Nov 2014 Link to this post

    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

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 21 Nov 2014 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2014 Link to this post

    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.}
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 04 Dec 2014 Link to this post

    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
     

    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.

     
  6. Answer
    Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 04 Dec 2014 Link to this post

    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?
  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 08 Dec 2014 Link to this post

    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
     

    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.

     
  8. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 08 Dec 2014 in reply to Daniel Link to this post


    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.


    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.
  9. BRAD
    BRAD avatar
    27 posts
    Member since:
    May 2012

    Posted 09 Dec 2014 Link to this post

    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!
  10. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 10 Dec 2014 Link to this post

    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
     

    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.

     
  11. Jeff
    Jeff avatar
    4 posts
    Member since:
    Feb 2012

    Posted 24 Jul 2015 Link to this post

    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

  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready