none
Intervalle de dates : modification (1) jquery pour MVC RRS feed

  • Question

  • Des informations plus à jour pourront être trouvées dans ce fil :

    Personnalisation des validations jquery pour MVC Entity Framework CodeFirst

    Bonjour tout le monde,

    J'utilise les validations de données jquery dans le cadre d'un site MVC 4 sur la base des DataAnnotations du CodeFirst d'Entity Framework.

    Avec ceci, il est très facile de vérifier qu'un champ numérique est renseigné avec une valeur dans l'intervalle attendu, puisqu'il suffit d'une clause Range en décoration de la déclaration du champ dans la classe.

    C'est pour les dates que c'est un peu plus délicat, car le test sur l'intervalle ne se fait qu'avec des valeurs numériques. Il y a deux ans, j'ai modifié la fonction à l'étiquette range dans jquery.validate.js, de façon à effectuer un test différent si la valeur reçue peut être transformée en date.

    La modification se situe juste après ceci :

                // http://docs.jquery.com/Plugins/Validation/Methods/range
                range: function (value, element, param) {

    ça marchait bien, et j'en avais rendu compte dans un forum sur codes_sources, hélas tout ce qu'il en reste c'est les deux lignes de citation dans les résultats de recherche de Google, car le site a été restructuré. Je n'ai pas eu le temps de proposer ce travail chez jquery.

    Or, j'ai bien retrouvé sur ma machine un site avec la fonction à range modifiée pour tester des dates, mais le test ne fonctionne pas. Il semble que cette fonction reçoive un paramètre element déclaré avec size=20, mais vingt éléments undefined -alors que je m'attendrais à y trouver un tableau avec les attributs de la balise HTML qui déclare le champ de saisie.

    J'ai donc dû oublier une autre modification, ailleurs ?

    La recherche que j'ai faite n'a pas mis spécialement en lumière que ce travail soit devenu obsolète ?

    Autrement, ici chez stackoverflow.com on propose de créer une règle rangedate, mais j'imagine que c'est l'intégration à MVC qui risque de nécessiter d'autres étapes.










    • Modifié Gloops samedi 11 avril 2015 19:32
    dimanche 22 février 2015 15:08

Réponses

  • La fonction range ainsi modifiée dans jquery.valdate.js permet de vérifier le respect aussi bien d'un intervalle de dates que d'un intervalle de nombres :

      // http://docs.jquery.com/Plugins/Validation/Methods/range
      range: function (value, element, param) {
          if (element.attributes["type"].value == "datetime") {
              var DateValue = new Date(value);
              param[0] = new Date(element.attributes["data-val-range-min"].value);
              param[1] = new Date(element.attributes["data-val-range-max"].value);
              value = DateValue;
          }
          return this.optional(element) || (value >= param[0] && value <= param[1]);
      },

    Exemple d'un champ date avec intervalle de validité, déclaré pour Entity Framework Code Frst :

      [Range(typeof(DateTime), "1713/1/1", "9999/1/1", ErrorMessage = "min Jan 01 1713 ; max Jan 01 9999")]
      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
      [Display(Name = "Date de naissance", ShortName = "DateNaissance", Description = "Date de naissance")]
      public Nullable<DateTime> DateNais { get; set; }

    H.S. : pour lire l'année d'une date en JavaScript, on utilisera plutôt getFullYear() que getYear().

    Il est à noter que nous trouvons ici chez mcnext un mode opératoire pour mettre en place la globalisation pour MVC, laquelle dérive trois fonctions dont range. Dans ce contexte, ce sera bien entendu à ce niveau qu'il y aura lieu d'adapter la modification ci-dessus.


    • Marqué comme réponse Gloops vendredi 27 février 2015 12:59
    • Modifié Gloops samedi 28 février 2015 10:59
    vendredi 27 février 2015 12:59

Toutes les réponses

  • Bonjour, Gloops,

    J'espère que le lien en bas vous sera utile:

    Utiliser jQuery UI Datepicker avec ASP.NET MVC

    Merci de nous tenir au courant.

    Cordialement,
    Téodora

    Votez! Appel à la contribution TechNet Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE. S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.


    lundi 23 février 2015 12:47
    Modérateur
  • Bonjour,

    Ce lien mène à une erreur 404, toutefois je vois un peu ce qu'est le DatePicker.

    Dites-moi si je me trompe, il me semble qu'il s'agit d'une interface utilisateur sympa pour la saisie d'une date, mais que le contrôle de validation répond à une autre fonctionnalité, qui est d'afficher un message d'erreur si la valeur saisie se trouve en dehors d'un intervalle donné ?

    Peut-être bien que le DatePicker permet de limiter la saisie entre des bornes, auquel cas effectivement il ne permettra pas de saisir une date qui pose ce problème.

    J'aimerais bien toutefois être en mesure de mettre en œuvre le contrôle de validation sur un intervalle de dates, de façon aussi efficace que sur un intervalle d'entiers. Histoire de pouvoir ensuite décider, en concertation avec le client, quelle interface il préfère, tout étant dans tous les cas en mesure de l'alerter, côté client comme côté serveur, si la date qu'il saisit n'est pas dans l'intervalle prévu.

    J'ai bien la correction de la fonction, mais j'échoue à lui passer les paramètres. Est-ce bizarre ou ai-je oublié quelque chose de fondamental ?

    [J'imagine que l'emploi du mot client avec deux acceptions différentes dans la même phrase n'empêche pas d'être clair ?]

    • Modifié Gloops lundi 23 février 2015 13:04
    lundi 23 février 2015 13:01
  • Bon, euh ... ça permet de voir si quelqu'un suit :)

    J'ai mis un point d'arrêt sur le test d'un nombre qui doit respecter des bornes.

    alert(element) affiche effectivement undefined, en revanche

    alert(element.attributes[4].value)

    me retourne bien le minimum.

    Du coup je n'ai pas vérifié, mais en remplaçant 4 par 5 je m'attends bien à recevoir le maximum, et on doit pouvoir mettre les noms des attributs entre guillemets.

    Dans l'absolu on pourrait trouver ça surprenant d'ailleurs : un element qui a des attributs devrait bien au moins être de type objet, non ? Plutôt qu'indéfini ...

    Dans ce cas de figure c'est d'ailleurs plus simple, car le minimum est aussi reçu en param[0], et le maximum en param[1], ce qui est davantage leur place pour l'usage qu'on veut en faire.

    Je me replonge là-dedans demain soir à la lumière de ceci : je ne me laisse plus arrêter par element undefined.


    • Modifié Gloops jeudi 26 février 2015 00:37
    mercredi 25 février 2015 12:38
  • La fonction range ainsi modifiée dans jquery.valdate.js permet de vérifier le respect aussi bien d'un intervalle de dates que d'un intervalle de nombres :

      // http://docs.jquery.com/Plugins/Validation/Methods/range
      range: function (value, element, param) {
          if (element.attributes["type"].value == "datetime") {
              var DateValue = new Date(value);
              param[0] = new Date(element.attributes["data-val-range-min"].value);
              param[1] = new Date(element.attributes["data-val-range-max"].value);
              value = DateValue;
          }
          return this.optional(element) || (value >= param[0] && value <= param[1]);
      },

    Exemple d'un champ date avec intervalle de validité, déclaré pour Entity Framework Code Frst :

      [Range(typeof(DateTime), "1713/1/1", "9999/1/1", ErrorMessage = "min Jan 01 1713 ; max Jan 01 9999")]
      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
      [Display(Name = "Date de naissance", ShortName = "DateNaissance", Description = "Date de naissance")]
      public Nullable<DateTime> DateNais { get; set; }

    H.S. : pour lire l'année d'une date en JavaScript, on utilisera plutôt getFullYear() que getYear().

    Il est à noter que nous trouvons ici chez mcnext un mode opératoire pour mettre en place la globalisation pour MVC, laquelle dérive trois fonctions dont range. Dans ce contexte, ce sera bien entendu à ce niveau qu'il y aura lieu d'adapter la modification ci-dessus.


    • Marqué comme réponse Gloops vendredi 27 février 2015 12:59
    • Modifié Gloops samedi 28 février 2015 10:59
    vendredi 27 février 2015 12:59