DatePicker Validator Required Not Working

[Lee]

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

[Lee]

I found a workaround for this that required overwriting the default date validation and knowing the text date format from the start. I have a function that is getting the user's short date format and converting that to letters (i.e. if their date is 12/20/2020, it changes that to mm/dd/yyyy so it matches the date input's mask. Then I create the element with a class of js-date-picker and a property of "required". Next I do the following in the validator: 

localizedShortDate = "mm/dd/yyyy";

                rules: {
                    date: function (input) {
                        // Checks if date is in the right format when dateInput set to true
                        if ($(input).hasClass("js-date-picker")) {
                            var validDate = kendo.parseDate($(input).val());
                            if (input.val() === localizedShortDate) {
                                return true;
                            }
                            if (!validDate) {
                                return false;
                            }
                        }
                        return true;
                    },
                    dateRequired: function (input) {
                        // Checks if date is required and present when dateInput set to true
                        if ($(input).hasClass("js-date-picker") && $(input).prop("required")) {
                            if (input.val() === localizedShortDate) {
                                return false;
                            }
                        }
                        return true;
                    },

In the messages I do this: 

"required" is there for non-date fields since they behave as expected. "dateRequired" is for date fields since they don't behave as expected.

                messages: {
                    date: function () {
                        return "This is not a date";
                    },
                    required: function () {
                        return "Required";
 },
                    dateRequired: function () {
                        return "Required";
 },

[Neli]

Hi Lee,

Thank you very much for sharing your approach with the community. We really appreciate sharing solutions. I am sure the information you have posted will be of great help to the other users in the forum.

Regards,

Neli

[Nikolay]

Hi Lee,

The required validation will not work with enabled DateInput for the DatePicker. This is due to the rendered mask in the input, which is what the DataInput is designed for.

I have to say that the only option for applying the required validation would be to add custom validation and compare the current value in the input with the format specified in the DateInput (or the default one)". 

Below I am posting the Custom validation documentation:

• https://docs.telerik.com/kendo-ui/controls/form/validation#custom-validation

Regards,
Nikolay
Progress Telerik

[Lee]

This seems like a bug that should be fixed.