Laissez-moi vous dire, s’il y a quelque chose qui pue avec ASP.NET MVC et bien l’état des outils de validation de données client-side. C’est simple. Dans un contexte multilingue, la seule chose qui fonctionne est l’intégration de la logique de validation à la librairie jQuery.Validate.
Tous ceux qui auront à valider des données dans un formulaire avec données numériques ou des dates pouvant avoir un format variant selon la culture m’en reparleront.
Vous voulez un exemple? Considérez la propriété suivante.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [Required] | |
| [Range(Min=0, Max=int.MaxValue) | |
| public decimal Salary { get; set; } |
Avec ASP.NET MVC, une propriété avec ces deux attributs de validation va faire en sorte de s’assurer que la saisie soit obligatoire et que le nombre soit compris entre 0 et int.MaxValue. En théorie, ça fonctionne bien. En particulier lorsqu’on fait uniquement affaire avec des formats anglais (ex.: en-US, en-CA, ca, etc.).
Dans une vue MVC, le code Salary.ToString(« n ») prendra la forme « 10 00,12 » avec la culture « fr ». Tandis qu’elle prendra la forme « 10,000.12 » avec la culture « en ». Une image vaut mille mots. Allez voir l’exemple sur csharppad que j’ai monté pour l’occasion.
Le problème est lié au fait que, avant d’exécuter les validations sur vos données, la librairie de validation utilisée par ASP.NET MVC va faire en sorte de s’assurer que votre donnée est du bon type. Dans notre cas en particulier, elle va s’assurer que la valeur soit une valeur décimale.
J’ai une question quiz pour vous. Comment la librairie fait-elle pour cette validation? En utilisant ce regex : ^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$. Allez vous amuser avec celle-ci. Sommairement, ce regex fait en sorte que 10,000.12 va valider correctement, mais pas 10 000,12.
Déprimant, n’est-ce pas? J’ai fait face à cette conclusion-là moi aussi.
À partir de ceci, quelles sont les possibilités afin d’être en mesure de faire une validation côté client?
- Faire des validations côté serveur. Principalement en mettant en place une logique impliquant decimal.TryParse et ModelState.
- Forcer les données dans un format de culture « en ».
- Trouver une façon de faire de la validation multiculturelle côté client avec une librairie JavaScript qui a du sens.
Valider des données en utilisant jQuery.Globalize
La bonne nouvelle dans tout ça c’est que la librairie jQuery.Validation est facile à bonifier en fonctionnalités. Cela signifie qu’il est possible d’aller modifier les règles de validations pour les différents scénarios requis. Dans mon cas, en plus des formats de nombres, je dois aussi valider des dates.
S’il y a bien de quoi qui est chiant à valider, ces dates. L’ironie est que la majorité des guides que vous allez trouver sur le web proposent de le faire par l’intermédiaire d’un regex. Dans un contexte multilingue, il s’agit d’une très mauvaise approche.
Une bonne pratique est de passer par l’utilisation de la librairie jquery.Globalize. Cette librairie propose un API permettant de manipuler ou générer des informations étant soumises à un formatage selon la langue. Par exemple, Globalize.parseDate permet de parser une chaîne de texte contenant une date.
La force de jquery.Globalize réside sous le fait que les règles d’analyse et de formatage de données est régi par le CLDR (Unicode Common Locale Data Repository). Avec le CLDR, tout ce qui peut varier selon la langue y est défini. Le bonheur dans tout ça est que les fichiers de définition sont disponibles librement sur GitHub en format JSON.
Faire fonctionner jQuery.Globalize sur son projet web peut être un peu déconcertant à première vue. Les instructions contiennent beaucoup trop d’informations. Résumons ainsi:
- Exécutez la commande suivante: npm install globalize cldr-data et attendez un peu (Globalize sera sous node_modules\globalize\dist et CLDR sous node_modules\cldr-data).
- Visitez ce site web et sélectionnez les fonctionnalités que vous désirez intégrer à votre site.
Ce dernier site web vous donnera la liste des fichiers JavaScript et JSON par langue à intégrer sur votre site web. C’est l’outil essentiel pour se donner un petit coup de main pour mettre en place correctement jQuery.Globalize.
Par la suite, c’est assez simple si vous vous référez au gist suivant :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $.when( | |
| $.get( "cldr/main/en/ca-gregorian.json" ), | |
| $.get( "cldr/main/fr/ca-gregorian.json" ), | |
| $.get( "cldr/supplemental/likelySubtags.json" ), | |
| $.get( "cldr/supplemental/timeData.json" ), | |
| $.get( "cldr/supplemental/weekData.json" ) | |
| ).then(function() { | |
| return [].slice.apply( arguments, [ 0 ] ).map(function( result ) { | |
| return result[ 0 ]; | |
| }); | |
| }).then( Globalize.load ); | |
| //Instantier jQuery.Globalize dans une culture | |
| Globalize("en") //Cette culture peut être fournie par votre backend MVC, par exemple System.Threading.Thread.CurrentThread.CurrentCulture | |
| //L'initialisation des règles peronnalisées pour jQuery.Validate se fait ici. | |
| $.validator.methods.date = function (value, element) { | |
| return this.optional(element) || Globalize.parseDate(value); | |
| }; |
Il s’agit du minimum de JavaScript à inclure dans votre application pour inclure jQuery.Globalize et pour réimplémenter la règle de validation « date » de jQuery.Validate. Il s’agit d’un minimum. Vous allez devoir aussi implémenter d’autres règles selon votre scénario. Il y a notamment « number » et « range » qui vous seront utiles.
J’espère que ce petit guide vous sera utile comme il me l’a été. Vous pouvez maintenant valider des données comme un pro!
—
Lecteurs français: en ce jour de fête nationale française, je vous souhaite de passer une très belle journée! ![20px-Flag_of_France.svg[1]](https://frenchcoding.files.wordpress.com/2016/07/20px-flag_of_france-svg1.png?w=840)
French Coding 
Hello
Un petit commentaire en passant, vu qu’on vient d’utiliser votre post comme base de notre mise en place de la gestion de la culture (nombre + dates) pour nos projets.
La mise en place a été un peu longue, mais le résultat est juste par-fait : plus de souci de gestion des formats, des binds ou autre, que ce soit côté client ou serveur.
Bref, MERCI !
G.