Archives de Tag: Français

Gérer les virgules et les points avec les validateur Razor

Etant français, je voulais que mon projet en MVC3 Razor accepte aussi bien les virgules que les points pour les nombres décimaux que je pouvais saisir. J’ai chercher durant un petit moment différentes techniques afin de parvenir à mes fins.
Ce n’est qu’après quelques heures, que je suis tombé sur ce site ce site. Très bien expliquer, il m’a permis de pas mal avancé sur le problème.

Il a suffit de ré-écrire la méthode de vérifcation avec les quelques arrangement qui vont mieux.

/* ----- methods_fr.js ----- */
/*
* Localized default methods for the jQuery validation plugin.
* Locale: FR
*/
$.extend($.validator.methods, {
    min: function (value, element, param) {
        return this.optional(element) || replaceComma(value) >= replaceComma(param);
    },
    max: function (value, element, param) {
        return this.optional(element) || replaceComma(value) = replaceComma(param[0]) && value <= replaceComma(param[1]));
    },
    date: function (value, element) {
        return this.optional(element) || /^\d\d?\.\d\d?\.\d\d\d?\d?$/.test(value);
    },
    number: function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
    }
});

function replaceComma(value) {
    // Quick & Dirty replace ',' by '.' as decimal separators
    return value.replace(',', '.');
}

Ceci permet lors de la vérification « en direct » de ne pas indiqué en rouge, un nombre qui possède une virgule ou un point.

Ensuite, il faut lors de la validation finale transformer les ‘.’ en ‘,’ , puisque nous somme en France, c’est la virgule qui est le séparateur des nombres décimaux. Dans mon cas, je ne vérifie qu’un seul champ monNombre. A vous d’être inventif si vous en avez plusieurs.

function validate() {
    var valueBefore = $("#monNombre").val();
    var valueAfter = valueBefore.replace('.', ',');
    $("#monNombre").val(valueAfter);
}

Il ne reste plus qu’a relier cette fonction à notre submit et d’importer nos scripts (validate et unobtrusive sont les scripts par défaut de Razor). Et attention à l’ordre qui reste très important.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/methods_fr.js")" type="text/javascript" ></script>

Enfin on vérifie dans le web.config, si la culture fr-FR est bien indiqué.

<system.web>
  <globalization culture="fr-FR" uiCulture="fr-FR" enableClientBasedCulture="false" />
  ...