Premium forums

MVC Client Validation not working Cancel

• Jason

  
  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.

  • KendoDropDownTest.zip
• Answered Georgi Krustev

  
  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!

  • KendoComboBox-jQuery-Validate.zip
• Andriy

  
  1 hour ago in reply to Georgi Krustev (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!