Ненавязчивая проверка в Chrome не будет проверяться с помощью дд / мм / гггг - PullRequest
Новая
       30

Ненавязчивая проверка в Chrome не будет проверяться с помощью дд / мм / гггг

53 голосов
/ 02 августа 2011

Я пытаюсь использовать самый простой из возможных сценариев с использованием выбора даты в разных браузерах.Я подозреваю, что делаю что-то очень простое неправильно, но после долгих поисков я так и не нашел решения.Ниже приведен пример кода, который представляет то, что я пытаюсь.

Если я использую Chrome (v12.0.742.122) и выбираю дату из средства выбора, например 13.08.2011, логика проверки jQuery не позволитстраницу для отправки, хотя я явно указал формат как «дд / мм / гг».

Если я изменю формат на 'dd / M / yy' и выберу дату, например, 13 августа 2011 года, она будет работать в Chrome, но затем не будет отправлена ​​мне в IE (v8.0.7600.16385).,В FireFox (v3.6.18) работают оба формата.

Какой сценарий проверки мне нужен, чтобы иметь возможность поддерживать форматы даты 'dd / mm / yy' в 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>

Ответы [ 12 ]

49 голосов
/ 02 августа 2011

Четыре часа спустя я наконец наткнулся на ответ .По какой-то причине у Chrome, похоже, есть некоторая встроенная склонность использовать американские форматы дат, где IE и FireFox могут быть разумными и использовать региональные настройки в ОС.

48 голосов
/ 23 ноября 2012

Вы можете использовать плагин Globalize.js, доступный здесь: https://github.com/jquery/globalize

Затем просто переопределите метод validate в файле основного сценария вашего веб-сайта следующим образом (избегайте редактирования файла библиотеки jquery.validate.js каквы можете обновить его в будущем): 

$.validator.methods.date = function (value, element) {
    return this.optional(element) || Globalize.parseDate(value, "d/M/y", "en");
}
22 голосов
/ 04 апреля 2013

Я знаю, что немного опоздал на вечеринку, но вот решение, которое я использовал для проверки Chrome, не принимающей даты в британском формате. Простая проверка подключи и играй, она не зависит от каких-либо плагинов или изменения каких-либо файлов. Он будет принимать любую дату в период с 01.01.1900 по 31/31/2999, в формате США или Великобритании. Очевидно, что есть недействительные даты, которые проскользнут мимо, но вы можете настроить выражение так, как душе угодно. Это отвечает моим потребностям, так как будет использоваться в зоне с низким трафиком сайта, с проверкой на стороне сервера. Область рассматриваемого сайта построена с использованием ASP.net MVC. 

jQuery.validator.methods.date = function(value, element) {
    var dateRegex = /^(0?[1-9]\/|[12]\d\/|3[01]\/){2}(19|20)\d\d$/;
    return this.optional(element) || dateRegex.test(value);
};
18 голосов
/ 02 ноября 2011

Похоже, что эта проблема была поднята с командой JQuery.

https://github.com/jzaefferer/jquery-validation/issues/153

Похоже, что обходной путь - это использовать dateITA в extra-method.js

Выглядит это так: 

jQuery.validator.addMethod(
    "dateITA",
    function(value, element) {
        var check = false;
        var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
        if( re.test(value)){
            var adata = value.split('/');
            var gg = parseInt(adata[0],10);
            var mm = parseInt(adata[1],10);
            var aaaa = parseInt(adata[2],10);
            var xdata = new Date(aaaa,mm-1,gg);
            if ( ( xdata.getFullYear() == aaaa ) 
                   && ( xdata.getMonth () == mm - 1 ) 
                   && ( xdata.getDate() == gg ) )
                check = true;
            else
                check = false;
        } else
            check = false;
        return this.optional(element) || check;
    },
    "Please enter a correct date"
);

Если вы добавите этот валидатор, вы можете затем присоединить свой указатель даты к классу .dateITA.

Пока этохорошо помог мне выйти за рамки этой глупой проблемы в Chrome.

2 голосов
/ 26 сентября 2016

Для работы над нашими проектами мы используем следующее:

2 голосов
/ 26 сентября 2013

Это остается проблемой в .net mvc4, где EditorFor DateTime по-прежнему создает атрибут data-val-date, несмотря на то, что в плагине проверки jQuery нет четкой документации об его использовании !!!Надеюсь, Microsoft исправит это и о data-val-date больше никогда не услышат!

Тем временем вы можете использовать предлагаемую библиотеку через modernizr: 

yepnope({
    test: isNaN(Date.parse("23/2/2012")),
    nope: 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js',
    complete: function () {
        $.validator.methods.date = $.validator.methods.dateITA
    }
});

или, если вы не хотите использовать yepnope / modernizr, и избавиться от компонента UTC метода dateITA (если использовать эту библиотеку для ввода местного времени, даты не всегда будут действительны в 1-й или последний день месяца, если только не в строке по Гринвичу - т.е. UTC + 0): 

(function ($) {
    var invokeTestDate = function () {
        return $.validator.methods.date.call({
            optional: function () {
                return false;
            }, (new Date(2012,8,23)).toLocaleDateString(), null);
    };
    if (invokeTestDate()) {
        return;
    }

    // http://docs.jquery.com/Plugins/Validation/Methods/date

    $.validator.methods.date = function (value, element) {
        //ES - Chrome does not use the locale when new Date objects instantiated:
        //return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        var d = new Date();
        return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
    }
})(jQuery);
1 голос
/ 13 декабря 2016

Пусть этот код поможет вам.

$.validator.addMethod(
         "date",
         function(value, element) {
              var check = false;
              var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
              var reBR = /^\d{4}\-\d{1,2}\-\d{1,2}$/;
              if( re.test(value)){
                   var adata = value.split('/');
                   var gg = parseInt(adata[0],10);
                   var mm = parseInt(adata[1],10);
                   var aaaa = parseInt(adata[2],10);
                   var xdata = new Date(aaaa,mm-1,gg);
                   if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
                        check = true;
                   else
                        check = false;
              } else if( reBR.test(value)){
                   var adata = value.split('-');
                   var aaaa = parseInt(adata[0],10);
                   var mm = parseInt(adata[1],10);
                   var gg = parseInt(adata[2],10);
                   var xdata = new Date(aaaa,mm-1,gg);
                   if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
                        check = true;
                   else
                        check = false;
              } else
                   check = false;
                   console.log(check);
              return this.optional(element) || check;
         },
         "Por favor insira uma data válida"
    );
1 голос
/ 28 апреля 2016

Я обнаружил, что самым простым исправлением этой ошибки является следующий фрагмент кода после вызова файла проверки; 

    jQuery.validator.methods["date"] = function (value, element){
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }

Даже в версиях, найденных в 2016 году, у меня все еще есть эта проблема без вышеуказанного кода в Chrome, а не в Firefox.

Это мое предпочтительное решение, так как для его работы не требуется никаких дополнительных библиотек или плагинов.

Я нашел этот фрагмент кода, когда гуглил проблему здесь.

0 голосов
/ 18 января 2018

Или мы можем попытаться переписать валидатор, а не игнорировать его. 

$.validator.addMethod("date", function (value, element) {
    var result = true;
    try {
        $.datepicker.parseDate('dd/mm/yy', value);
    }
    catch (err) {
        result = false;
    }
    return result;
});
0 голосов
/ 11 марта 2015

Это единственное решение, которое сработало для меня: http://www.codeproject.com/Tips/579279/Fixing-jQuery-non-US-Date-Validation-for-Chrome

 jQuery.extend(jQuery.validator.methods, {
        date: function (value, element) {
            var isChrome = window.chrome;
            // make correction for chrome
            if (isChrome) {
                var d = new Date();
                return this.optional(element) || 
                !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
            }
            // leave default behavior
            else {
                return this.optional(element) || 
                !/Invalid|NaN/.test(new Date(value));
            }
        }
    });
Страница:
...