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!!!!

Comments

  1. Damian BradyApril 25, 2012 at 4:56 PM

    Hi,

    I'm a bit late to this post, but this solution doesn't work.

    The toLocaleDateString method doesn't take any parameters. What you're doing is getting the locale string value of the current date. That means the test is for the current date, not the date in the textbox (or wherever).

    Damian Brady

    ReplyDelete
    Replies
    1. AlexApril 25, 2012 at 6:39 PM

      Hi Damian,

      Thanks for pinpointing out my mistake here. Seems like it is just bypass the checking using current date .
      I'll try and look for a correct answer and repost this.
      THanks a lot

      Delete

Post a Comment

Popular posts from this blog

Django Form: MultipleChoiceField and How To Have Choices From Model Example

Image
Its been long time after my last post. During my development in Django, I encountered this issue, where I don't know how to assign tuple value to choice argument in Django MultipleChoiceField. So here I would like to share on how to do this. Here are some information on the environment for this code: Django 1.6.1 doc: https://docs.djangoproject.com/en/1.6/ref/forms/fields/#multiplechoicefield Then looks into the forms.py: #1 import the models which use for MultipleChoiceField from TestChoice.models import Test #2 create a static CHOICES variable to hole this tuple, you can perform any normal Django query here. TEST_CHOICES = [[x.id, x.name] for x in Test.objects.all()] #3 If you would like to add extra choices, then you can do the following: TEST_CHOICES.insert(0, ['', "Empty"]) #4 The form field should looks like below, (required=False, only if you want this field to be optional) class TestForm(forms.Form):     test= forms.MultipleChoiceField...
Read more

DJango Queryset comparing date time

Good day to all developers. Today encountered this issue where I do a simple queryset in DJango and hit with the following warning message:   RuntimeWarning: DateTimeField MessageContent.send_time received a naive datetime (2014-05-14 04:46:30.392000) while time zone support is active. How is this happen? This is due to I do the following datetime comparison in my queryset: import datetime Item.objects.filter(created = datetime.datetime.now()) The error is due to TIME_ZONE (in settings.py) is enabled by default. So the solution for this is pretty simple: 1) Either to set the TIME_ZONE to False in settings.py ( this will take away the timezone capability of your application) 2) or by comparing to timezone enabled datetime which the code as below: import datetime from django.utils.timezone import utc now = datetime.datetime.utcnow().replace(tzinfo=utc) Item.objects.filter(created = now) With this, the problem has been solved. More informati...
Read more

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. Lo...
Read more