Unobtrusive validation attributes not rendering

6 posts, 0 answers
  1. michael
    michael avatar
    1 posts
    Member since:
    May 2007

    Posted 13 Aug 2012 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 16 Aug 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tonny
    Tonny avatar
    11 posts
    Member since:
    Mar 2012

    Posted 30 Aug 2012 Link to this post

    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!
  5. Tonny
    Tonny avatar
    11 posts
    Member since:
    Mar 2012

    Posted 30 Aug 2012 Link to this post

    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
  6. Neil
    Neil avatar
    14 posts
    Member since:
    Jul 2012

    Posted 20 Sep 2012 Link to this post

    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.
  7. Tonny
    Tonny avatar
    11 posts
    Member since:
    Mar 2012

    Posted 20 Sep 2012 Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready