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

Date field Custom Validation with Formatting (Case Sensitive!)

16 Answers 572 Views
Grid
This is a migrated thread and some comments may be shown as answers.
BSB
Top achievements
Rank 1
BSB asked on 19 Apr 2012, 10:10 PM
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!

16 Answers, 1 is accepted

Sort by
0
Gergo
Top achievements
Rank 1
answered on 20 Apr 2012, 09:52 PM
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ő
0
BSB
Top achievements
Rank 1
answered on 20 Apr 2012, 10:19 PM
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!
0
Gergo
Top achievements
Rank 1
answered on 20 Apr 2012, 10:44 PM
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ő
0
BSB
Top achievements
Rank 1
answered on 21 Apr 2012, 03:00 AM
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!
0
Rosen
Telerik team
answered on 24 Apr 2012, 02:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BSB
Top achievements
Rank 1
answered on 30 Apr 2012, 02:05 PM
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!


0
Rosen
Telerik team
answered on 02 May 2012, 12:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BSB
Top achievements
Rank 1
answered on 24 Jul 2012, 03:17 PM
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!
0
Rosen
Telerik team
answered on 25 Jul 2012, 11:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BSB
Top achievements
Rank 1
answered on 25 Jul 2012, 03:17 PM
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!

0
Rosen
Telerik team
answered on 26 Jul 2012, 06:03 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BSB
Top achievements
Rank 1
answered on 26 Jul 2012, 01:36 PM
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/ 

 


0
BSB
Top achievements
Rank 1
answered on 07 Aug 2012, 09:28 PM
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!
0
BSB
Top achievements
Rank 1
answered on 05 Sep 2012, 09:06 PM
It's been a month.  Does anyone have a solution to my last question?  thanks!!
Ashraf
Top achievements
Rank 1
Iron
commented on 29 Apr 2021, 11:22 AM

Was this ever answered or workaround discovered?
0
Ashraf
Top achievements
Rank 1
Iron
answered on 29 Apr 2021, 11:23 AM

I am also having this problem...

Any workarounds or solutions yet?

0
Tsvetomir
Telerik team
answered on 04 May 2021, 06:35 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
BSB
Top achievements
Rank 1
Answers by
Gergo
Top achievements
Rank 1
BSB
Top achievements
Rank 1
Rosen
Telerik team
Ashraf
Top achievements
Rank 1
Iron
Tsvetomir
Telerik team
Share this question
or