MVC Client Validation not working

5 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
    2696 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
    92 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
    2696 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!

Back to Top