Validating hand entered dates, which could be invalid text

3 posts, 0 answers
  1. Dave
    Dave avatar
    15 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2014 Link to this post

    Hi,

    I'm looking for a way to detect that a user has keyed in an invalid date into a date time picker control where having a blank/nullable date IS valid.  Currently, I cannot tell the difference (looking at a model object) if a user cleared the date or typed the word "dog" into the text box rather than a valid date format because both appear as null.  I've tried using the element's change event, but it doesn't fire if the initial value is null (blank), which makes since if it evaluates "dog" as a null (there would be no change for its initial value of null).  

    I thought perhaps a validator was the correct way of handling this.  When I change an item in my observable array the change event is fired by the array, I then called myValidator.validate() method, but it always returns true.  Also, the validator itself runs AFTER the observable array's change method. Since myValidator.validate() returned true, I save the data to the server.  Once the validator does fire, it validates the date field and thinks it is invalid.  This leaves me with a word like "dog" sitting in my date time picker and a null getting sent to the server.

    How can I tell my user that "dog" isn't a proper date and prevent it from going to the server?

    Dave
  2. Dave
    Dave avatar
    15 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2014 Link to this post

    To make my question more clear, I've created this JSFiddle example.  If you overwrite the date with the word "dog", you can see that the save event fires BEFORE the validation.  Also, I'm calling the validator, but it is telling me everything is ok:

    var theValidator = $(viewModelDivId).kendoValidator().data("kendoValidator");
    if (theValidator.validate()) {
          console.log('Save the data');
    }

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dave
    Dave avatar
    15 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2014 Link to this post

    Ok.  I figured it out.  I finally noticed what I was doing wrong after studying this example:
    http://demos.telerik.com/kendo-ui/validator/custom-validation

    I was getting a hold of the validator in an incorrect manner.  I should have been doing this:
    var theValidator = $(viewModelDivId).data("kendoValidator");
    if (theValidator.validate()) {
          console.log('Save the data');
    }


    Here is an updated JS Fiddle with a few extra buttons and console logs.   Hopefully, this helps someone.
Back to Top