Dropdown not validating client-side, only server side. And it's causing odd behavior.

4 posts, 1 answers
  1. Javier
    Javier avatar
    20 posts
    Member since:
    Dec 2013

    Posted 16 Dec 2013 Link to this post

    I have a very simple form with two inputs.
    A drop down and a textarea.  When I try to submit the form with nothing entered, only the textarea validation fires.
    If I type something in there, then the dropdown fires (after a post).

    At this point, if I clear the text in the textarea, then the error message appears again for the textare, but the dropdown completely disappears (the error message stays).  Then I have to enter text into the textarea, submit the form.  Then the dropdown appears again.

    Why isn't the dropdown validating client-side, and how can I avoid it disappearing?

    @using CCReporting.Models
    @using mvcReporting.Models
    @model mvcReporting.Models.CalendarModels.CalendarCommentModel
    @{
        ViewBag.Title = "Add Comment";
    }
    @using (Html.BeginForm())
    {
        
        <div id="EventSelectorDiv">
            Select Event:<br />
            @Html.ValidationMessageFor(model => model.EventID)
            @(Html.Kendo().DropDownListFor(x => x.EventID).DataTextField("Text")
              .DataValueField("Value")
              .BindTo(@ViewBag.AllEvents).OptionLabel("Select Event...").HtmlAttributes(new { style = "width: 400px;" }))
            
        </div>
        
        <div>
            Comment Details:<br />
            @Html.ValidationMessageFor(model => model.CommentDetails)
            @Html.TextAreaFor(x => x.CommentDetails, new { @class = "k-textbox", style = "width: 400px; height: 150px;" })
            
        </div>
        @(Html.Kendo().Button()
        .Name("SaveButton")
        .HtmlAttributes(new { type = "submit" })
          .Content("Save Comment"))
    }

    I'm using data annotation for the validation

            public class CalendarCommentModel
            {
                public string CommentType { get; set; }
                [Required(ErrorMessage = "Event is required")]
                public string EventID { get; set; }
                [Required]
                public string CommentDate { get; set; }
                [Required(ErrorMessage = "Comment details are required")]
                [DataType(DataType.Text)]
                public string CommentDetails { get; set; }
            }
  2. Answer
    Javier
    Javier avatar
    20 posts
    Member since:
    Dec 2013

    Posted 18 Dec 2013 Link to this post

    Hi,

    If you are using the jQuery validation then you should override the default ignore settings as demonstrated in this documentation topic in order to enable the validation for the DropDownList.

    Regards,
    Daniel
    Telerik
    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. Javier
    Javier avatar
    20 posts
    Member since:
    Dec 2013

    Posted 18 Dec 2013 Link to this post

    Perfect, thanks
  5. Javier
    Javier avatar
    20 posts
    Member since:
    Dec 2013

    Posted 18 Dec 2013 Link to this post

    Please disregard this reply
Back to Top
UI for ASP.NET MVC is VS 2017 Ready