Kendo Combobox Not Triggering Required Validation Message

Question

I have implemented Required validation for my MVC view. The text controls show the validation message but the kendo combobox doesnt. I'm doing an ajax postback.

Any reason why the comboxbox doest show the message? The work Type combo is mandatory, but its not showing the validation message.

View

@using (Ajax.BeginForm("ActivityWorkLog_Create", "Activity", new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "OnWorklogStatusSuccess",
    OnFailure = "OnWorklogStatusFailure"
}, new { id = "workLogForm" }))
{

<div class="k-popup-edit-form k-window-content k-content" data-role="window">
    <div class="k-edit-form-container">
        @Html.HiddenFor(x => x.RequestID, new { data_bind = "value: requestId" })
        @Html.HiddenFor(x => x.ActivityID, new { data_bind = "value: activityId" })
        @Html.HiddenFor(x => x.CountryCode, new { data_bind = "value: countryCode" })

         <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.WorkLogAppliesToName)
            </div>
            <div class="editor-field">
                @(Html.Kendo().ComboBoxFor(model => model.WorkLogAppliesToName)
        .Name("WorkLogAppliesToID")
        .Filter("contains")
        .HtmlAttributes(new { style = "width:300px", @readonly = "readonly" })
        .Placeholder("Select...")
        .DataTextField("WorkLogAppliesToName")
        .DataValueField("WorkLogAppliesToID")

        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetWorkLogAppliesTo", "WorkLog", new { id = 0 }).Type(HttpVerbs.Post)
            )

        )
                )
                @Html.ValidationMessageFor(model => model.WorkLogAppliesToName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.ActivitySLA)
            </div>
            <div class="editor-field">
                @*@Html.EditorFor(model => model.ActivitySLA)*@
                @Html.TextBoxFor(model => model.ActivitySLA, new { id = "ActivityDesc", @readonly = "readonly", Class = "textBoxFor" })

            </div>
        </div>

        <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.ActivityID)
            </div>
            <div class="editor-field">
                @(Html.Kendo().ComboBoxFor(model => model.ActivityID)
    .Name("Activity")
    .Filter("contains")
    .HtmlAttributes(new { style = "width:300px", @readonly = "readonly" })
    .Placeholder("Select...")
    .DataTextField("Description")
    .DataValueField("ActivityID")

    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetActivity", "WorkLog").Data("additionalActivityInfo").Type(HttpVerbs.Post)
        )//.ServerFiltering(true)
    )//.CascadeFrom("ServiceID").Filter("contains")

                )
                @Html.ValidationMessageFor(model => model.ServiceID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.WorkLogType)
            </div>
            <div class="editor-field">
                @(Html.Kendo().ComboBoxFor(model => model.WorkLogTypeCode)
    .Name("WorkLogTypeCode1")
    .Filter("contains")
    .HtmlAttributes(new { style = "width:300px"})
    .Placeholder("Select...")
    .DataTextField("WorkLogType")
    .DataValueField("WorkLogTypeCode")
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("GetWorkLogType", "WorkLog").Data("additionalWLTInfo").Type(HttpVerbs.Post))
    )

                )
                @Html.ValidationMessageFor(model => model.WorkLogTypeCode, "Please select a worklog type", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.WorkLogSubject)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.WorkLogSubject)
                @Html.ValidationMessageFor(model => model.WorkLogSubject, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="editor-label">
                @Html.LabelFor(model => model.WorkLogDetails)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.WorkLogDetails, new { htmlAttributes = new { @class = "form-control", cols = "50" } })
                @Html.ValidationMessageFor(model => model.WorkLogDetails, "", new { @class = "text-danger" })
            </div>
        </div>

            <div class="worklogStatusButtonAlign">
                <button id="btnWorkLogSave" type="submit" class="k-button k-button-icontext k-primary k-grid-update">Save</button>
                <button id="btnClose" type="button" class="k-button k-button-icontext k-grid-cancel">Cancel</button>

            </div>

            <div id="worklogStatusMessage"> </div>

        </div>
</div>
}

Javacript

   <script>

            $(document).ready(function () {



                var form = $("#workLogForm")
                       .removeData("validator")
                       .removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);


            });

View model

 public class ActivityWorkLogViewModel
 {
        [ScaffoldColumn(false)]
        [Display(Name = "WorkLogID", ResourceType = typeof(Resources.Resource))]
        public int WorkLogID { get; set; }

        [Required(ErrorMessage = "WorkLogType is required")]
        [Display(Name = "WorkLogTypeCode", ResourceType = typeof(Resources.Resource))]
        public string WorkLogTypeCode { get; set; }


        [Display(Name = "WorkLogType", ResourceType = typeof(Resources.Resource))]
        public string WorkLogType { get; set; }
        [Required]
        [Display(Name = "WorkLogAppliesToID", ResourceType = typeof(Resources.Resource))]
        public int WorkLogAppliesToID { get; set; }
        [Display(Name = "WorkLogAppliesToName", ResourceType = typeof(Resources.Resource))]
        public string WorkLogAppliesToName { get; set; }
        [Required]
        [Display(Name = "RequestID", ResourceType = typeof(Resources.Resource))]
        public int RequestID { get; set; }
        [Display(Name = "ServiceID", ResourceType = typeof(Resources.Resource))]
        public Nullable<int> ServiceID { get; set; }
        [Display(Name = "ActivityID", ResourceType = typeof(Resources.Resource))]
        public Nullable<int> ActivityID { get; set; }
        [Required(ErrorMessage = "Subject is required")]
        [Display(Name = "WorkLogSubject", ResourceType = typeof(Resources.Resource))]
        public string WorkLogSubject { get; set; }
        [Required(ErrorMessage = "Details is required")]
        [Display(Name = "WorkLogDetails", ResourceType = typeof(Resources.Resource))]
        public string WorkLogDetails { get; set; }
        [Display(Name = "EmailTo", ResourceType = typeof(Resources.Resource))]
        public string EmailTo { get; set; }
        [Display(Name = "IsActive", ResourceType = typeof(Resources.Resource))]
        public bool IsActive { get; set; }
        [Display(Name = "CountryCode", ResourceType = typeof(Resources.Resource))]
        public string CountryCode { get; set; }
        [Display(Name = "ActivitySLA", ResourceType = typeof(Resources.Resource))]
        public string ActivitySLA { get; set; }
}

Answer 1

Try to add this:

<script>
    $(function () {
        $("form").kendoValidator();
    });
</script>

and/or:

<script>
    $.validator.setDefaults({
        ignore: ""
    });
</script>

Answer 2

You can set validation rules to force the a item selection:

$("form").kendoValidator({
        rules: {
            invalidSelection: function (input) {
                if (input.is("[name=COMBO_NAME]")) {
                    if (input.val() != "" && $("#TCOMBO_NAME").data("kendoComboBox").selectedIndex == -1) {
                        return false;
                    }
                }
                return true;
            }
        }
    });

This way it travel all the fields of the form, being able to establish rules for each field. Regards.