This is a migrated thread and some comments may be shown as answers.

TimePicker Validation Wipes Valid Time After Invalid Time Entered

5 Answers 269 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 09 Dec 2016, 03:29 PM

I have a timepicker in my MVC form.

@Html.Kendo().TimePickerFor(model => model.ShipmentCallTime).Format("HH:mm")

 

The user enters an invalid time like "2343" then clicks save. On postback, ModelState.IsValid is false as the control recognizes that as an invalid time and the validation message is displayed properly.

 

The user then corrects the time entry to a valid time "23:43" and clicks save.  On postback, ModelState.IsValid is true but the valid time the user entered is not in the model.  The property is NULL. 

Why??  It seems like the TimePicker is nuking the valid time for some reason.  If I go back after the save and enter a valid time it works correctly.  I can repeat these steps and have this happen every time.

5 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 13 Dec 2016, 02:33 PM
Hi John,

Looks strange indeed.

Is this happen if you directly submit a valid time? How do you access your model? Is it possible that you are looking at the old values of your model?

Regards,
Vasil
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 13 Dec 2016, 06:53 PM

If you directly submit a valid time it works.  It only fails if you enter an invalid time first then enter a valid time.

I'm accessing my model the standard MVC way.  Populate it in the controller, pass it to the view, then on save I pass the view model back to the controller.

I am not looking at the old values of the model.  I'm debugging and stopping on my controller action which is I'm passing my view model into.  I can clearly see a NULL in my ShipmentCallTime property.  

I'm wondering if something is happening client side when the validation error is returned to the form that is mucking up the control.

 

0
Vasil
Telerik team
answered on 15 Dec 2016, 02:41 PM
Hello John,

Since the picker itself does not have validation, I would ask you how do you validate the form?

Additionally did you tried to profile what are the request made from browser to the server, to determinate if this JavaScript or MVC related problem?

Regards,
Vasil
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 15 Dec 2016, 03:29 PM

I'm confused that you think the picker does not have validation.  What is the point of a time picker that lets you put any value in it?  And for sure it has validation.  If I put in an invalid time and submit the form, in the controller ActionResult ModelState.IsValid is false and the error raised is "The value '3343' is not valid for Call Time.".

Also, let me clarify that the user is typing in the time, not selecting it.

The property that my time picker is validating to has no attributes that do any validation either.

[DisplayName("Call Time")]
public DateTime? ShipmentCallTime { get; set; }

 

Here is the script that is rendered when the form loads.

<script>
jQuery(function(){jQuery("#ShipmentCallTime").kendoTimePicker({"format":"HH:mm","min":new Date(2016,11,15,0,0,0,0),"max":new Date(2016,11,15,0,0,0,0),"interval":30});});
</script>

 

If an invalid entry is entered for time then posted back, the validation span is written out.

<span class="field-validation-error text-danger" data-valmsg-replace="true" data-valmsg-for="ShipmentCallTime">The value '33:33' is not valid for Call Time.</span>

 

No idea if this is JavaScript or MVC related.  That's why I'm asking the question.  

0
Vasil
Telerik team
answered on 16 Dec 2016, 09:11 AM
Hello John,

This span is not rendered from the picker. It is coming from the model validation. And indeed '33:33' is not correct DateTime, and the type in your database is DateTime.

The idea of looking what submit from the browser is to determinate what is the origin of the problem. If we had exact answer I would he answer you in the first post. If you send us sample, we could debug it here. If not, you could try to gain more information by checking the browsers request.
Open the developer tools of the browser (Press F12), to to the Network tab, follow your steps for replicating the issue and see what is the submitted data to the server. This information could help you further in resolving the issue.

Regards,
Vasil
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
John
Top achievements
Rank 1
Answers by
Vasil
Telerik team
John
Top achievements
Rank 1
Share this question
or