web-dev-qa-db-ja.com

Chromeでの控えめな検証はdd / mm / yyyyでは検証されません

さまざまなブラウザーで日付ピッカーを使用して、可能な限り単純なシナリオを使用しようとしています。私は非常に単純なことを間違った方法でやっていると思いますが、多くの検索を行った後、まだ解決策が見つかりませんでした。以下は、私が試みていることを表すサンプルコードです。

Chrome（v12.0.742.122）を使用し、13/08/2011のようにピッカーから日付を選択すると、jQuery検証ロジックでは、明示的にページを送信できません'dd/mm/yy'の形式を指定しました。

フォーマットを「dd/M/yy」に変更し、13/Aug/2011のような日付を選択すると、Chromeで動作しますが、IE（v8.0.7600.16385）。FireFox（v3.6.18）では、両方の形式が機能します。

Chromeで「dd/mm/yy」の日付形式をサポートするには、どの検証スクリプトが必要ですか？

<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>
jqueryjquery-uijquery-validatedatepickerunobtrusive-validation
53
sipwiz

4時間後、私はついに answer を見つけました。何らかの理由でChromeは米国の日付形式を使用する組み込みの傾向があり、IEとFireFoxは賢明でOSの地域設定を使用できます。

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

ここで利用可能なGlobalize.jsプラグインを使用できます。 https://github.com/jquery/globalize

次に、Webサイトのメインスクリプトファイルでvalidateメソッドを次のように再定義します（jquery.validate.jsライブラリファイルは将来更新する可能性があるため、編集しないでください）。

$.validator.methods.date = function (value, element) {
    return this.optional(element) || Globalize.parseDate(value, "d/M/y", "en");
}
49
magritte

私はパーティーに少し遅れていることを知っていますが、ここに私が使用した解決策がありますChrome英国形式の日付を受け入れない検証。単純なプラグアンドプレイ検証、プラグインまたはファイルの変更。1/ 1/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);
};
22
webdevduck

この問題は、JQueryチームで提起されたようです。

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

現時点での回避策は、 additional-methods.js でdateITAを使用することです

次のようになります。

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のこの愚かな問題を乗り越えるために、これはうまく機能しました。

18
mezoid

これは.net mvc4の問題のままであり、jQuery検証プラグインの明確な文書化にもかかわらず、EditorForDateTimeはdata-val-date属性を生成します!!!マイクロソフトがこれを修正し、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を使用したくない場合、およびdateITAメソッドのUTCコンポーネントを削除する場合（このライブラリを使用して現地時間を入力する場合、日付は、月の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);
2
Brent

私たちはプロジェクトに取り組むために以下を使用します。

if ($.validator) {
    $.validator.addMethod("date",
        function (value, element, params) {
            if (this.optional(element)) {
                return true;
            }

            var ok = true;
            try {
                $.datepicker.parseDate("dd/mm/yy", value);
            }
            catch (err) {
                ok = false;
            }
            return ok;
        });
}
2
DiskJunky

このコードがあなたを助けますように。

$.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
user2715347

検証ファイルを呼び出した後、このエラーの最も簡単な修正は次のコードスニペットであることがわかりました。

    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ではありません。

動作するために追加のライブラリやプラグインを必要としないため、これは私の推奨ソリューションです。

私は問題をグーグルで調べながらこのコードスニペットを見つけました here。

1
Tarquin

また、どの文化でも機能すると思われる解決策も見つけました。

http://devdens.blogspot.com/2011/11/jquery-validation-fix-for-date-format_29.html

実際のjquery.valdiation.min.jsファイルを変更する必要がありますが、これまでのところ私のために働いています。

0
aaron

validateで定義するdateRuleメソッドを変更する必要があります（たとえば、正規表現は単純なものです）。

$.validator.addMethod(
    "dateRule",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d$/);
    },
    "Please enter a date in the format dd/mm/yy"
);

希望に応じて正規表現を切り替えることができます。日付のこの正規表現を here から取得しました。これはM/D/YYまたはM/D/YYYYまたはMM/DD/YYYYまたはMM/DD/YYをサポートします：1/1/1920から12/31/2019; 2月29日と30日は常に許可されます

^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$
0
Calvin

または、バリデータを無視するのではなく上書きすることもできます。

$.validator.addMethod("date", function (value, element) {
    var result = true;
    try {
        $.datepicker.parseDate('dd/mm/yy', value);
    }
    catch (err) {
        result = false;
    }
    return result;
});
0
Kevin Wong

これは私のために働いた唯一のソリューションです： 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));
            }
        }
    });
0
Jodda