This is a migrated thread and some comments may be shown as answers.

Unobtrusive validation attributes not rendering

5 Answers 331 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
michael
Top achievements
Rank 1
michael asked on 14 Aug 2012, 01:37 AM
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.

5 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 16 Aug 2012, 03:49 PM
Hello,

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

All the best,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonny
Top achievements
Rank 1
answered on 30 Aug 2012, 06:48 PM
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!
0
Tonny
Top achievements
Rank 1
answered on 31 Aug 2012, 01:29 AM
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
0
Neil
Top achievements
Rank 1
answered on 20 Sep 2012, 03:08 PM
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.
0
Tonny
Top achievements
Rank 1
answered on 20 Sep 2012, 08:08 PM
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.

Tags
General Discussions
Asked by
michael
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Tonny
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Share this question
or