Unobtrusive validation in Chrome won't validate with dd/mm/yyyy

Aaron Clauson picture Aaron Clauson · Aug 2, 2011 · Viewed 45.5k times · Source

I'm trying to use the simplest possible scenario using a date picker in different browsers. I suspect I'm doing something very simple the wrong way but after lots of searching around I still haven't found a solution. Below is some sample code that represents what I'm attempting.

If I use Chrome (v12.0.742.122) and pick a date from the picker like 13/08/2011 the jQuery validation logic will not allow the page to submit even though I've explicitly specified the format as 'dd/mm/yy'.

If I change the format to 'dd/M/yy' and choose a date like 13/Aug/2011 it works in Chrome but then won't submit for me in IE (v8.0.7600.16385). In FireFox (v3.6.18) both formats work.

What validation script do I need to be able to support date formats of 'dd/mm/yy' in Chrome?

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
  <script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript" src="jquery.validate.js"></script>
  <script type="text/javascript" src="jquery.validate.unobtrusive.js"></script>
  <script type="text/javascript" src="jquery-ui.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
    $('.date').datepicker({ dateFormat: 'dd/mm/yy' });
            $.validator.addMethod("dateRule", function(value, element) {
      return true;
    },
    "Error message");
      });
  </script>
 </head>
 <body>
    <form>
        Date: <input type="text" name="myDate" class="date dateRule" />
        <input type="submit" />
    </form>
 </body>
</html>

Answer

Aaron Clauson picture Aaron Clauson · Aug 2, 2011

Four hours later I finally stumbled across the answer. For some reason Chrome seems to have some inbuilt predilection to use US date formats where IE and FireFox are able to be sensible and use the regional settings on the OS.

jQuery.validator.methods["date"] = function (value, element) { return true; }