MVC Client Validation not working

7 posts, 1 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    Mar 2012

    Posted 06 Sep 2012 Link to this post

    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.

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    2799 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    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!

  3. Andrii
    Andrii avatar
    13 posts
    Member since:
    Nov 2011

    Posted 24 May 2013 Link to this post

    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!

  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 10 Oct 2013 Link to this post

    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.

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    2799 posts
    Member since:
    Sep 2012

    Posted 11 Oct 2013 Link to this post

    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!

  6. Jacques
    Jacques avatar
    109 posts
    Member since:
    Jun 2007

    Posted 03 Nov in reply to Georgi Krustev Link to this post

    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? 

  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    2799 posts
    Member since:
    Sep 2012

    Posted 05 Nov Link to this post

    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.

     

Back to Top