Date field Custom Validation with Formatting (Case Sensitive!)

[BSB]

Hi,  currently I have a date field with the custom format dd-MMM-YYYY
fields: [{ field: "StartDate", title: "Start Date",  format: "dd-MMM-yyyy"}]

I have implemented a custom validator in the schema (retyped, but I think the syntax is correct)
fields: { 
StartDate: { type: "date",
validation: { dateValidation: function (input) {
var isValid = true;
alert('validator executed');
 try {
//insert check to validate date
}
catch (error) { isValid = false; }
return isValid;
}
}
}

When I enter manually 19-Apr-2012, the validator works - The alert box fires off.  If I use 19-APr-2012 (capital P!), the custom validation does not occur.  
I assume this is caused by some RegEx somewhere ... Is there anyway to get around this case sensitive 'feature' ?

thanks!

[Gergo]

Hi, BSB

The problem is with the '-' in the date format, not the capital letters.
Please try this code, and see that it is parsed correctly.

var stringDate = '22/APr/2012';

 

       try {

           var dateParsed = new Date(stringDate);

           alert(dateParsed);

       }

       catch (err) {

           alert(err);

       }

After that try it with '-', 22-APr-2012 and it will fail. As I've tried, it also fails with 22-Apr-2012.

Regards,
Gergő

[BSB]

Hi Gergo

I tried what you suggested

<script type="text/javascript">

    var stringDate = '22-APr-2012';

    var dateParsed = new Date(stringDate);

    alert(dateParsed);

    </script>

In chrome, it executes correctly.  In IE, it does not.  (I'll modify my original submission to avoid this confusion)  The underlying condition still applies.  The method doesn't ever execute, as a format rule is applied earlier (below) in the Kendo.all.min.js file 

date: function (a) {
if (a.filter("[type^=date],[" + c.attr("type") + "=date]").length && a.val() !== "")
return c.parseDate(a.val(), a.attr(c.attr("format"))) !== null;
return !0
}

It does a format check, and the underlying jQuery parseDate is case sensitive.

This being said, would it be possible to inject a onBlur event to modify the value of the Date Text box to the correct format first?
thanks!

[Gergo]

Hi BSB,

Thank you for sharing the explanation. It is a good idea what you've said, it could worth a try, or you could check out this:
http://docs.jquery.com/UI/Datepicker/parseDate

As I see it supports to specify date format for parsing, maybe you can use it in your validate function.

Regards,
Gergő

[BSB]

Hi Gergő,

Thanks for your help, I'm afraid you are missing my point (I'm clearly not making myself clear!! :) ).  The function dateValidation: function (input)  does NOT execute, as long as there is a format error (ex dd-MMM-yyyy for the text '20-APr-2012). As soon as I take for format error away (by correcting the capitalization of the month to '20-Apr-2012'), the function executes as desired.  I've considered putting an onfocus event to remove the format text, only to add it back in on blur, but that really feels like a hack in the long term ... 

thanks!

[Rosen]

Hello,

You may override the built-in date validation rule  when used during Grid editing similar to the following:

StartDate: {
    type: "date",
    validation: {
        date: function(input) {
            //handle date validation here
        }
    }
}

However, note that if the value is not valid Date, it would not be set to the data record's field. Thus you should make sure that it can be converted to a JavaScript Date object.

Regards,
Rosen
the Telerik team

[BSB]

Hi Rosen,

I understand that I can add a validation method like you describe.  If however I add a formatting string in the fields obj

fields: [{ field: "StartDate", title: "Start Date",  format: "dd-MMM-yyyy"}] 

And then Incorrectly format the string within  (EG '30-May-2012' is Valid.  '20-MAy-2012' is NOT valid). The 2nd capital (A) causes the issue.  When this format error occurs, The method 

StartDate: {

    type: "date",

    validation: {

        date: function(input) {

            //handle date validation here

        }

    }

}



Does not execute.  The Format error prevents the custom validation from occurring.

Any suggestions?  thanks!

[Rosen]

Hi,

As I have mentioned the code I did show will override the default date validation rule, thus it will be executed even if the date is not in valid format.
On a side note, the validation rules will be executed one after another for each input, thus if one fails the rest of the input rules will be skipped.

Regards,
Rosen
the Telerik team

[BSB]

Hi Rosen,

After giving up back in May, I'm back for this same issue - I'm getting issues from QA for this.  Fortunately, I have an example for you this time here.

http://jsfiddle.net/mTqdE/4/  

Steps to reproduce
1) edit on the 1st line
2) change the text to "03-jul-1996"  (notice the lack of capitalization on the month from the original text "03-Jul-1996")
3) Focus out of that box, or hit the update button.
4) Notice how the box is now empty?  It passed my validation (even replacing the contents with the correct formatted text for dd-MMM-yyyy), but failed for some other reason.

What happened, and how can I fix it?

thanks!

[Rosen]

Hi,

You cannot change the value of the field in the validation rule. Note also that modifying the value in such way is not suggested, although it is possible through custom code. 

Regards,
Rosen
the Telerik team

[BSB]

Hi,

I think you missed the point of my example.  In the new one, I validate the date to be correct.  I don't adjust the value.  

After I type in 03-jul-1996, and focus away from the text box, the custom validation occurs.  After I validate it to be true, it blanks out. 

http://jsfiddle.net/mTqdE/6/ 

Is there any way of fixing that without customizing the KendoUI Javascript Libraries?

thanks!

[Rosen]

As I have stated in my previous message you cannot change the value within the validation rule function. The value is already extracted from the input. The value is still incorrect as it is still in not a valid format, thus the date picker will not show it.

Regards,
Rosen
the Telerik team

[BSB]

Rosen,

As I stated in my latest example (posted below again so you'll click on it this time and take a look), I now do not make an adjustment to the field during the validation rule.  I validate a correct date, and return true.

Later somewhere buried in the the Kendo libraries, there is a case sensitive comparison made against the format I have chosen (dd-MMM-yyyy).  If the case sensitive format is not met correctly, Kendo blanks out the value in the box.  (eg Valid: 03-Jul-1996.  Invalid: 03-jul-1996).  

Is there a way to turn off format validation?  Or make it case insensitive?  

http://jsfiddle.net/mTqdE/6/ 

 

[BSB]

Hi Rosen,

Did you get a chance to look at my last post here (Jul 26, 2012) ?  Is this a valid issue?  

Also, would you mind scrubbing my name from your post?  I don't believe I used it in my posts, so I don't believe you should as well. That's why we have user names.

thanks!

[BSB]

It's been a month.  Does anyone have a solution to my last question?  thanks!!

[Ashraf]

Was this ever answered or workaround discovered?

[Ashraf]

I am also having this problem...

Any workarounds or solutions yet?

[Tsvetomir]

Hi Ashraf,

With the recent versions, the date fields are parsed before being applied to the field. The validation should be applied to the date value and not the exact casing. Please find the updated Dojo here:

https://dojo.telerik.com/uliJiZOB

Upon inputting a date with the lower casing, the date format will be internally adjusted and no error message is shown.

 

Regards,
Tsvetomir
Progress Telerik