Unobtrusive validation attributes not rendering

[michael]

I'm new to KendoUI, so I'm probably doing something stupid. When using the MVC wrapper and creating a control:

@(Html.Kendo().DropDownListFor(m => m.CardPayment.State)

                            .OptionLabel("Select state...")

                            .BindTo(new SelectList(Model.States, "Abbreviation", "Name"))

                            .DataTextField("Text")

                            .DataValueField("Value")

                            .HtmlAttributes(new { value = Model.CardPayment.State })

                        )

I'm not getting any data-val attributes rendered on the controls. This goes for all controls that I'm creating, not just the drop down list. All of my Kendo controls are not generating data-val attributes.

<span tabindex="0" style="" unselectable="on" class="k-widget k-dropdown k-header"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Select state...</span><span class="k-select"><span class="k-icon k-i-arrow-s">select</span></span></span><input id="CardPayment_State" name="CardPayment.State" type="text" value="" data-role="dropdownlist" style="display: none; "></span>

I'm sure my model is correct, as when adding the line:
@Html.TextBoxFor(m => m.CardPayment.State)
directly under the above control, the data-val attributes are generated correctly.

<input data-val="true" data-val-required="You must enter the billing state for the card." id="CardPayment_State" name="CardPayment.State" type="text" value="">

[Display(Name = "State")]

[Required(ErrorMessage = "You must enter the billing state for the card.")]

[DataMember]

public string State { get; set; }

Am I missing something?
Thanks.

[Atanas Korchev]

Hello,

 I couldn't reproduced the observed behavior. Find attached my test project.

All the best,
Atanas Korchev
the Telerik team

[Tonny]

Hello Atanas,
I am having a similar problem. The required validation attributes are rendering for me but the client side validation is not executing for dropdownlists.

I can see it works on you sample MVC application, but I am using MVC 4 with .NET Framework 4.0. I copied your controller, action and model to my MVC 4 project and the client side validation was not working either. Could you please verify if your sample code works on MVC4/.NET 4.0?

Thanks!

[Tonny]

UPDATE: I upgraded the attached application to MVC 4 and validation was still working. After upgrading the jQuery Validation Pluging (jquery.validate.min.js) version from 1.7 to 1.9 validation on the kendo drop down stopped working. Please confirm that this is an issue with jQuery Validation 1.9, any workarounds or fixes would be appreciated.

Thanks again

[Neil]

There is a still a problem with validation on the Html.Kendo.DropDownListFor wrapper, I modified the above solution to mimic the setup I am using (trying to use) and the validation still fails. The example modifications I made are these (using Kendo UI Complete v2012.2.710): 

Models:

    public class CardPayment
    {
        [Display(Name = "State")]
        [Required(ErrorMessage = "You must enter the billing state for the card.")]
        public string State { get; set; }
    }

    public class CardParent
    {
        public CardPayment CardPayment { get; set; }
        public IEnumerable<State> States { get; set; }
    }

    public class State
    {
        public string stateID { get; set; }
        public string stateName { get; set; }
    }

Controller:

public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            CardParent _parent = new CardParent();
            List<State> stateList = new List<State>();
           
    State state1 = new State
            {
                stateID = "1",
                stateName = "one"
            };

            State state2 = new State
            {
                stateID = "2",
                stateName = "two"
            };

            stateList.Add(state1);
            stateList.Add(state2);
            _parent.States = stateList;

            return View(_parent);
        }

View:

    @(Html.Kendo().DropDownListFor(m => m.CardPayment.State)
    .Name("States")
    .DataTextField("stateName")
    .DataValueField("stateID")
    .BindTo(Model.States)
    .OptionLabel("Select a state..."))
    @(Html.ValidationMessageFor(m => m.CardPayment.State))

Thanks,

Neil.

[Tonny]

I found out that the version of Jquery Validation 1.8+ does not validate hidden fields. Kendo dropdowns are hidden inputs with "fake" dropdown next to it. In my HTML i can see the field validators added to the hidden inputs, but they do not validate because Jquery validate is not validating them.

The workarounds i have found so far are:
Use Jquery Validation 1.7 

or add the following script to the pages where you have your form. This validate hidden fields:

<script type="text/javascript">
$(function () {
var form = $('#[formID]);
form.data('validator').settings.ignore = ''; // default is ":hidden".
});
</script>

Hope this helps.