Required validation message doesn't appear for drop down list fields

[Gary Land]

Hi,

I have created a custom template for adding events to the scheduler, and within this I have added 3 new fields, 2 drop downs and a text box. All 3 of the new fields are set as required. If I leave them blank and click save, the required validation message is shown for the new text field but not shown for the two drop down fields (see attached screen shot). How can I get the message to show for the drop downs (personnel & encounter)?

The html for my custom template is:

<div class="k-edit-label"><label for="personnel">Personnel Details</label></div>
<div data-container-for="personnel" class="k-edit-field">
    <select class="diaryDropDown" id="personnel" data-bind="value:personnel" data-role="dropdownlist" required="required"
            data-value-field="value" data-text-field="text">
        <option value="001">001: Bob Smith</option>
        <option value="002">002: John Smith</option>
        <option value="003">003: Mark Jones</option>
        <option value="004">004: Alan Evans</option>
    </select>
</div>
<div class="k-edit-label"><label for="encounter">Encounter Type</label></div>
<div data-container-for="encounter" class="k-edit-field">
    <select class="diaryDropDown" id="encounter" data-bind="value:encounter" data-role="dropdownlist" required="required"
            data-value-field="value" data-text-field="text">
        <option value="1">Encounter A</option>
        <option value="2">Encounter B</option>
        <option value="3">Encounter C</option>
        <option value="4">Encounter D</option>
    </select>
</div>
<div class="k-edit-label"><label for="reason">Reason</label></div>
<div data-container-for="reason" class="k-edit-field">
    <input type="text" class="k-input k-textbox" name="reason" required="required" data-bind="value:reason">
</div>
<div class="k-edit-label"><label for="title">Title</label></div>
<div data-container-for="title" class="k-edit-field">
    <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
</div>
<div class="k-edit-label">
    <label for="start">Start</label>
</div>
<div data-container-for="start" class="k-edit-field">
    <input type="text"
            data-role="datetimepicker"
            data-interval="15"
            data-type="date"
            data-bind="value:start,invisible:IsAllDay"
            name="start" />
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="Start" />
    <span data-bind="text: startTimezone"></span>
    <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="end">End</label></div>
<div data-container-for="end" class="k-edit-field">
    <input type="text" data-type="date" data-role="datetimepicker" data-interval="15"data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <span data-bind="text: endTimezone"></span>
    <span data-bind="text: startTimezone, invisible: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="isAllDay">All day event</label></div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
</div>
<div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
<div data-container-for="recurrenceRule" class="k-edit-field">
    <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
</div>
<div class="k-edit-label"><label for="description">Description</label></div>
<div data-container-for="description" class="k-edit-field">
    <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
</div>
<div class="k-edit-label"><label for="clinicID">Clinic</label></div>
<div data-container-for="clinicID" class="k-edit-field">
    <select id="clinicID" data-bind="value:clinicID" data-role="dropdownlist" required="required"
        data-value-field="value" data-text-field="text">
        <option value="1">Clinic A</option>
        <option value="2">Clinic B</option>
        <option value="3">Clinic C</option>
        <option value="4">Clinic D</option>
    </select>
</div>

 

My scheduler is defined as:

$('#divDiaryCalendar').kendoScheduler({
    date: new Date(commonFunctions.getSchedulerCurrentDate()),
    startTime: new Date(commonFunctions.getSchedulerCurrentDate() + " 08:00 AM"),
    endTime: new Date(commonFunctions.getSchedulerCurrentDate() + " 08:00 PM"),
    editable: {
        template: self.customTemplate(),
    },
    dataSource: {
        batch: true,
        transport: {
            read: {
                url: commonFunctions.getAjaxBaseUrl() + '/Api/V1/diary/read',
                dataType: "json"
            },
            create: {
                url: commonFunctions.getAjaxBaseUrl() + '/Api/V1/diary/create',
                dataType: "json"
            },
            update: {
                url: commonFunctions.getAjaxBaseUrl() + '/Api/V1/diary/update',
                dataType: "json"
            },
            destroy: {
                url: commonFunctions.getAjaxBaseUrl() + '/Api/V1/diary/destroy',
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        schema: {
            model: {
                id: "AppointmentID",
                fields: {
                    AppointmentID: { from: "_id", type: "string" },
                    personnel: { from: "personnel", validation: { required: true } },
                    encounter: { from: "encounter", validation: { required: true } },
                    reason: { from: "reason", validation: { required: true } },
                    title: { from: "title", validation: { required: true } },
                    start: { type: "date", from: "start" },
                    end: { type: "date", from: "end" },
                    clinicID: { from: "clinicID" },
                    isAllDay: { type: "boolean", from: "isAllDay" },
                    startTimezone: { from: "startTimezone" },
                    endTimezone: { from: "endTimezone" },
                    description: { from: "description" },
                    recurrenceId: { from: "recurrenceID" },
                    recurrenceRule: { from: "recurrenceRule" },
                    recurrenceException: { from: "recurrenceException" }
                }
            }
        }
    },
    group: {
        resources: ["Clinics"],
        orientation: "horizontal"
    },
    resources: [
        {
            name: "Clinics",
            field: "clinicID",
            title: "Clinic",
            dataSource: [
                { text: "Clinic A", value: 1, color: "#f8a398" },
                { text: "Clinic B", value: 2, color: "#51a0ed" },
                { text: "Clinic C", value: 3, color: "#56ca85" },
                { text: "Clinic D", value: 4, color: "yellow" }
            ]
        }
    ],
    majorTick: 30,
    minorTickCount: 3,
    height: "100%",
    footer: false,
    views: [
        { type: "day", selected: true, dateHeaderTemplate: "<span>#=kendo.toString(date, 'ddd d MMM')#</span>" },
        { type: "week", dateHeaderTemplate: "<span>#=kendo.toString(date, 'ddd d MMM')#</span>" },
        "month",
        { type: "timeline", eventHeight: 30 },
        "agenda"
    ],
    selectable: true
})

Regards,

Gary

[Vladimir Iliev]

Hello Gary,

After inspecting the provided code it appears that the reason current behavior is the missing "name" attribute which is used by the validator to find the editor for current validation message:

<select class="diaryDropDown" name="personnel"

Regards,
Vladimir Iliev
Telerik