Jquery Validation fix for date format dd/mm/yyyy in Chrome and Safari
After a long search, finally i found the solution for JQuery validation (Can get the plugin from here: http://docs.jquery.com/Plugins/Validation) for date in Chrome and Safari.
This is because Chrome and Safari do not handle the format properly.
When developer set datepicker format from mm/dd/yyyy (default format) to dd/mm/yyyy, JQuery validation plugin tool does not able validate this format (only happen in Chrome and Browser. Other browser like IE, and Firefox is working fine).
For example, if you initiate datepicker like this:
$(':input.date').datepicker({dateFormat: 'dd/mm/yy'});
Then when you select date with day more than 12 like 13/11/2011 or 22/11/2011 and so on, and when you are using Jquery validation plugin to validate before submit, this will normally return with 'Please enter a valid date' in Chrome and Safari.
The solve this issue, it is needed to modify JQuery validation plugin. For my case it is jquery.validation.min.js.
Look for a part like this in the file:
" date:function(value,element) "
SOLUTION
The whole part of the function should looks like this:
date:function(value,element){return this.optional(element)||!/Invalid|NaN/.test(new Date(value));}
Replace this whole part with this:
date:function(value,element){var d = new Date();return this.optional(element)||!/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));}
(those in red is the add on to the previous function)
For now your validation should work for all browser included Chrome and Safari. Remember to clear cache for the changes to take effect.
Happy Coding!!!!
This is because Chrome and Safari do not handle the format properly.
When developer set datepicker format from mm/dd/yyyy (default format) to dd/mm/yyyy, JQuery validation plugin tool does not able validate this format (only happen in Chrome and Browser. Other browser like IE, and Firefox is working fine).
For example, if you initiate datepicker like this:
$(':input.date').datepicker({dateFormat: 'dd/mm/yy'});
Then when you select date with day more than 12 like 13/11/2011 or 22/11/2011 and so on, and when you are using Jquery validation plugin to validate before submit, this will normally return with 'Please enter a valid date' in Chrome and Safari.
The solve this issue, it is needed to modify JQuery validation plugin. For my case it is jquery.validation.min.js.
Look for a part like this in the file:
" date:function(value,element) "
SOLUTION
The whole part of the function should looks like this:
date:function(value,element){return this.optional(element)||!/Invalid|NaN/.test(new Date(value));}
Replace this whole part with this:
date:function(value,element){var d = new Date();return this.optional(element)||!/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));}
(those in red is the add on to the previous function)
For now your validation should work for all browser included Chrome and Safari. Remember to clear cache for the changes to take effect.
Happy Coding!!!!
Hello Alex,
ReplyDeleteI'm sure its too late to respond your blog. However, I would like to say thank you for this article. I have similar problem and have been fixed by this article. Once again thank you....