web-dev-qa-db-fra.com

Validation discrète dans Chrome ne sera pas validé avec jj / mm / aaaa

J'essaie d'utiliser le scénario le plus simple possible en utilisant un sélecteur de date dans différents navigateurs. Je soupçonne que je fais quelque chose de très simple dans le mauvais sens, mais après de nombreuses recherches, je n'ai toujours pas trouvé de solution. Voici un exemple de code qui représente ce que j'essaie.

Si j'utilise Chrome (v12.0.742.122) et que je choisis une date dans le sélecteur comme le 13/08/2011, la logique de validation jQuery ne permettra pas à la page de se soumettre même si je l'ai explicitement spécifié le format comme "jj/mm/aa".

Si je change le format en 'jj/M/aa' et que je choisis une date comme 13/août/2011, cela fonctionne en Chrome mais ne sera pas soumis pour moi en IE (v8.0.7600.16385). Dans FireFox (v3.6.18), les deux formats fonctionnent.

De quel script de validation ai-je besoin pour pouvoir prendre en charge les formats de date "jj/mm/aa" dans 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>
jqueryjquery-uijquery-validatedatepickerunobtrusive-validation
53
sipwiz

Quatre heures plus tard, je suis finalement tombé sur le réponse . Pour une raison quelconque Chrome semble avoir une prédilection intégrée pour utiliser les formats de date américains où IE et FireFox peuvent être raisonnables et utiliser les paramètres régionaux sur le système d'exploitation) .

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

Vous pouvez utiliser le plugin Globalize.js disponible ici: https://github.com/jquery/globalize

Ensuite, redéfinissez simplement la méthode de validation dans le fichier de script principal de votre site Web comme ceci (évitez de modifier le fichier de bibliothèque jquery.validate.js car vous voudrez peut-être le mettre à jour à l'avenir):

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

Je sais que je suis un peu en retard pour la fête, mais voici la solution que j'ai utilisée pour Chrome n'accepte pas les dates au format britannique. Une simple validation plug and play, elle ne repose sur aucune plugins ou en modifiant n'importe quel fichier. Il acceptera n'importe quelle date entre le 1/1/1900 et le 31/31/2999, donc au format US ou UK. Évidemment, il y a des dates invalides qui se faufileront, mais vous pouvez ajuster le regex au contenu de votre cœur. Cela a répondu à mes besoins car il sera utilisé sur une zone à faible trafic du site, avec validation côté serveur. La zone du site en question est construite avec 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

Il semble que ce problème ait été soulevé avec l'équipe JQuery.

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

Il semble que la solution de contournement consiste à utiliser dateITA dans additional-methods.js

Cela ressemble à ceci:

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"
);

Si vous ajoutez ce validateur, vous pouvez ensuite attacher votre sélecteur de date à la classe '.dateITA'.

Jusqu'à présent, cela a bien fonctionné pour moi pour me sortir de ce problème stupide dans Chrome.

18
mezoid

Cela reste un problème dans .net mvc4, où le EditorForDateTime produit toujours un data-val-date attribut, malgré une documentation claire dans le plugin de validation jQuery pour ne pas l'utiliser !!! Espérons que Microsoft corrige cela et data-val-date n'est plus jamais entendu parler!

En attendant, vous pouvez utiliser la bibliothèque suggérée via 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
    }
});

ou si vous ne souhaitez pas utiliser yepnope/modernizr et vous débarrasser du composant UTC de la méthode dateITA (si vous utilisez cette bibliothèque pour entrer une heure locale, les dates ne seront pas toujours validées le 1er ou le dernier jour du mois, sauf le Ligne de Greenwich - c'est-à-dire 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

Nous utilisons les éléments suivants pour travailler sur nos projets;

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

Que ce code vous aide.

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

J'ai trouvé que la correction la plus simple de cette erreur était l'extrait de code suivant après avoir appelé votre fichier de validation;

    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;
    }

Même dans les versions trouvées en 2016, j'ai toujours ce problème sans le code ci-dessus dans Chrome et non Firefox.

C'est ma solution préférée car elle ne nécessite aucune bibliothèque ou plugin supplémentaire pour fonctionner.

J'ai trouvé cet extrait de code en recherchant le problème sur Google ici.

1
Tarquin

J'ai également trouvé une solution qui semble fonctionner pour n'importe quelle culture.

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

Il vous oblige à modifier le fichier jquery.valdiation.min.js réel, mais jusqu'à présent, cela fonctionne pour moi.

0
aaron

devrait changer la méthode dateRule que vous définissez dans validate (le regex est juste simple par exemple):

$.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"
);

vous pouvez changer l'expression régulière pour ce que vous voulez. J'ai obtenu cette expression régulière pour la date du ici qui prend en charge M/D/YY ou M/D/YYYY ou MM/DD/YYYY ou MM/DD/YY: 1/1/1920 à 12/31/2019; 29 et 30 février toujours autorisés

^((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

Ou nous pourrions essayer d'écraser le validateur au lieu de l'ignorer.

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

C'est la seule solution qui a fonctionné pour moi: 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