Client side validation for min and max

9 posts, 0 answers
  1. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 21 Feb 2018 Link to this post

    Using the min and max values for the picker will prevent you from being able to select the dates/times via the UI, but you can still manually enter values outside of the min and max. I believe this is expected behavior, but there doesn't seem to e a way to inform the user that they just entered a datetime that is not in valid range. The onChange event does not fire, which makes sense, so there's no way for me to hook in and tell the user they just entered an invalid date.

     

    My question: How can I disable dates in the UI AND still do min/max validation for the user so they know they netred a date/time out of the range and prevent a a form submission?

  2. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 23 Feb 2018 Link to this post

    Hello, Alex,

    In this cases, we can recommend using the DateInput property of the DatePicker. This will fire the change event if a value under the min one is entered:


    function onChange() {
     if(this.value() === null){
     var min = this.min()
     this.value(min)
     
    }

    https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/DatePickerBuilderBase#methods-DateInput(System.Boolean)

    This should also work automatically one the following issue is fixed:

    https://github.com/telerik/kendo-ui-core/issues/3828

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 23 Feb 2018 in reply to Stefan Link to this post

    So are you saying the issue I'm experience is a bug, and will be fixed at some point in the future?
  4. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 27 Feb 2018 Link to this post

    Hello Alex,

    You are correct when the issue is fixed, the desired functionality will be working as expected.

    In the meantime, use the workaround from my colleague's post.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 28 Feb 2018 in reply to Preslav Link to this post

    This IS an issue for us, but is something we can wait to be fixed.
  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2379 posts

    Posted 27 Mar 2018 Link to this post

    Hi Alex,

    This is a follow up for the issue in question, we are working on it right now. However, changing the behavior of the components would introduce a breaking change either in DateInput or in the  picker widgets (DatePicker, TimePicker, DateTimePicker). Introducing breaking changes is something that we strive to avoid.

    With that said, a possible fix of the issue would be clearing the DateInput value when an invalid date is entered in the picker component. What do you think of such imlementation? Will it work for your scenario?

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Alex
    Alex avatar
    75 posts
    Member since:
    May 2015

    Posted 03 Apr 2018 in reply to Viktor Tachev Link to this post

    a possible fix of the issue would be clearing the DateInput value when an invalid date is entered in the picker component. What do you think of such imlementation? Will it work for your scenario?

     

    I think that's reasonable. But I think there should be some cue to the end-user as to why the data just blanked out, but maybe that would be my responsibility? If so, where can I capture the invalid date value. Will the onChange event receive the invalid date value in the event parameters? Will there be some flag indicating the date value was invalid?

  8. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 05 Apr 2018 Link to this post

    Hello Alex,

    Thank you for your feedback. Viktor is out of the office, and I am not sure what is the correct answer to your questions. Thus, as soon as he comes back, I will let him know to update this post.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2379 posts

    Posted 11 Apr 2018 Link to this post

    Hi,

    ​The current behavior is observed because the DateInput corrects the entered value if it is out of range. However, if the user enters an invalid value the Date(Time)Picker does not accept it. What we can suggest for applying the value displayed in the DateInput to the DatePicker is the approach shown in the dojo below:

    http://dojo.telerik.com/oPuKIxez/3


    With that said, it is always recommended to use additional validation for the data entered by the users. This would prevent errors and can also be used to prompt the users what is not correct. The example below shows the Kendo Validator in action.

    https://demos.telerik.com/kendo-ui/validator/index




    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 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