Date Picker and Custom Validation Attribute

[Daniel]

I'm using a Kendo Date Picker (2018.1.221.545) on a page like this:

@(Html.Kendo().DatePickerFor(model => model.ClinicBeganDate)
    .Value(Model.ClinicBeganDate.HasValue ? Model.ClinicBeganDate.Value.ToString("MM/dd/yyyy") : "")
)

 

The model for ClinicBeginDate looks like this:

[DataType(DataType.Date)]
[DateRangeYearAgoToToday]
[Display(Name = "Date Clinic Began")]
[Required]
public Nullable<System.DateTime> ClinicBeganDate { get; set; }

 

Note that DateRangeYearAgoToToday is a custom validation attribute.

If I enter a future date and click Save the server side validation works correctly, the form is re-displayed and an error message appears next to the date field. But when I change the invalid date to a valid one (within the past year) and click Save, the form is re-displayed, the date field is blank, and the error message 'Date Clinic Began is required' appears.

After debugging with developer tools I discovered that when Save is clicked the first time with the invalid date, the field is included with the posted form data. The second time Save is clicked it is not. As a result ClinicBeganDate is null the second time and a required validation error results. This happens even though a date is clearly displayed in the field before Save is clicked the second time.

So the problem seems to be the server side validation, but I don't understand why that would prevent a date picker field from getting posted in the form data. Any ideas how to fix this? Obviously I can do the date range validation on the client side but that just hides the problem.

Thanks...

[Stefan]

Hello, Daniel,

Thank you for the details.

This sounds like an issue that could occur if the Date format is different in the DatePicker and the application. Please check the following article as it can prove helpful:

https://docs.telerik.com/aspnet-mvc/troubleshoot/troubleshooting-validation#globalized-dates-and-numbers-are-not-recognized-as-valid-when-using-the-validator

If the issue still occurs, please provide an example, and I will gladly investigate it as the issue could be caused by a factor which we are overlooking at this moment.

Regards,
Stefan
Progress Telerik

[Daniel]

Hi Stefan,

Thanks for the reply.I read the article you linked to, but I'm not sure how it applies to this situation or what I would change. I'm not using different cultures on the client and server and I'm not getting an invalid date message.

Are you suggesting that I add this code to the page?

<script>
    kendo.ui.validator.rules.mvcdate = function (input) {
        //use the custom date format here
        //kendo.parseDate - http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseDate

        return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;
    }
</script>

[Stefan]

Hello, Daniel,

This was only a suggestion from us based on the information.

In general, when the issue is a specific one, it is better to have a runnable example where we can observe it and provide a suggestion best suited for it. Otherwise, we can only guess based on the information, but it is not guaranteed that the suggestion will be on point every time as there are factors which are not available to us.

If sending an example is currently not possible, please check the following and share the result with us:

1) Subscribe to the change event of the widget and observe the actual value that is set after the change:

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/events/change

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/value

2) On the save, button click, check the value of the widget using the value method. If the value is correct, intercept the request and programmatically add the ClinicBeganDate value.



Regards,
Stefan
Progress Telerik

[Daniel]

Hi Stefan,

Here is an example project. To reproduce the issue:

Browse to the Home/Create page.
Enter a future date in the Eval Date field.
Click the Create button.
An alert will display the Kendo Date Picker value. Click OK.
The error message 'Today's Date must be between a year ago and the current date.' should be displayed.
Enter a past date in the Eval Date field.
Click the Create button.
An alert will display the Kendo Date Picker value. Click OK.
The error message 'The Eval Date field is required.' should be displayed.

Instead of the error message 'The Eval Date field is required.' being displayed, the browser should be redirected to the Index page and the Eval Date (passed in TempData) should be displayed at the bottom of the page.

The alert shows the correct value in the date field, but it's missing from the posted Form Data. It looks like the date field is briefly hidden for some reason.

The issue does not occur with an older version of jQuery (3.0.0) and jQuery.Validation (1.11.1).

Thanks,

Tim

[Stefan]

Hello, Daniel,

Thank you for the example.

I was able to reproduce it on my end as well.

It is a very strange scenario as the widget was the correct value, but still, a null value is sent to the controller.

The thing that made me curious is that the value is not part of the form that at all, it looks like the form is completely ignoring it on submit.

As this only occurs with specific jQuery version, I can assume that it could be something in that version that is causing it, as the Kendo UI widget has the expected value.

I will forward this to the developers' team, for additional details and will get back to you as soon as we have more details on this.

Regards,
Stefan
Progress Telerik

[Daniel]

thank you

[Stefan]

Hello, Daniel,

Thank you for the patience.

After consulting with the developers' team we can offer two approaches:

1) To remove the jQuery validation, as using both validations can cause the observed undesired side effect.

2) To use the approach described in the following article:

https://docs.telerik.com/aspnet-mvc/getting-started/validation#employ-jquery-validation

Please have in mind that a date parser could be needed if this can be used on machines with different culture settings.

If there are any issues with chosen approach, please let me know and I will gladly assist further.

Regards,
Stefan
Progress Telerik

[Evan Stineman]

I'm having the same exact problem.  So we have to allow the unobtrusive validation to validate hidden fields for datepicker to work?

This would break a bunch of other things on my pages.  Is this something you're going to fix in a future release?

Thanks

[Milena]

Hello Daniel,

We are not able to fix this behavior on our side, because the problem seems to be related to some change in jQuery and jQuery Validation after a specific version, however jQuery  is not part of our product. You can contact jQuery team for additional information about this case. Meantime, I would suggest you to try to integrade the approach from our previous post in your project.

Regards,
Milena
Progress Telerik