TimePicker Validation Wipes Valid Time After Invalid Time Entered

6 posts, 0 answers
  1. John
    John avatar
    21 posts
    Member since:
    Apr 2015

    Posted 09 Dec 2016 Link to this post

    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.

  2. Vasil
    Admin
    Vasil avatar
    1585 posts

    Posted 13 Dec 2016 Link to this post

    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.
  3. John
    John avatar
    21 posts
    Member since:
    Apr 2015

    Posted 13 Dec 2016 in reply to Vasil Link to this post

    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.

     

  4. Vasil
    Admin
    Vasil avatar
    1585 posts

    Posted 15 Dec 2016 Link to this post

    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.
  5. John
    John avatar
    21 posts
    Member since:
    Apr 2015

    Posted 15 Dec 2016 in reply to Vasil Link to this post

    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.  

  6. Vasil
    Admin
    Vasil avatar
    1585 posts

    Posted 16 Dec 2016 Link to this post

    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.
Back to Top