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

Validating hand entered dates, which could be invalid text

2 Answers 93 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 10 Sep 2014, 06:03 PM
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 Answers, 1 is accepted

Sort by
0
Dave
Top achievements
Rank 1
answered on 10 Sep 2014, 07:42 PM
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');
}

0
Dave
Top achievements
Rank 1
answered on 10 Sep 2014, 08:46 PM
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.
Tags
Date/Time Pickers
Asked by
Dave
Top achievements
Rank 1
Answers by
Dave
Top achievements
Rank 1
Share this question
or