web-dev-qa-db-fra.com

Je ne parviens pas à faire fonctionner la mondialisation JQuery

J'essaie d'utiliser le plugin jQuery Globalization afin de résoudre le problème des virgules avec la validation du client jquery non obstructive. Cependant, j'ai essayé beaucoup de solutions et il n'y avait pas de bonne solution pour résoudre ce problème. Je suis sur un ordinateur de localisation autre que l'anglais et il est important que mes clients entrent une valeur décimale telle que "123,66" et non "123,66". La validation ASP.NET me dit que le prix doit être un nombre! meh es-tu sérieux ? lol

Je reçois cette erreur javascript lorsque j'essaie de résoudre le problème.

$.global is undefined

Voici mon code.

Layout.cshtml 

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>

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

    <script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>

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

    <script src="@Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

glob.fix.js 

$.validator.methods.range = function (value, element, param) {
   var globalizedValue = value.replace(",", ".");
   return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}

$.validator.methods.number = function (value, element) {
   return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}

Je ne comprends pas .. cela devrait fonctionner depuis que j'ai ajouté ~/Scripts/globalize.js.

Une idée? ou vous avez peut-être une meilleure solution pour que la validation du client fonctionne et me permet d’entrer des virgules sous forme décimale?

jquery-globalization
16
Rushino

J'ai trouvé le moyen de me débarrasser enfin du problème de la décimale avec séparateur virgule!

Voici une photo du résultat! Pas plus de problèmes de validation.

enter image description here

Les étapes à la solution.

1- Récupérez la bibliothèque de globalisation pour jQuery

Vous devez obtenir le dernier script! J'ai aussi trouvé des réponses périmées.
L’objet à appeler la bibliothèque n’est plus $.global ni quoi que ce soit d'autre que Globalize.

2- Inclure les scripts dans votre projet. Vous devez les ajouter après le jquery.validation.

<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>

3- Remplacez certaines méthodes du validateur. Cela remplacera les méthodes de validation 'nombre' et 'plage' qui posaient problème.

$.validator.methods.number = function (value, element) {
    return this.optional(element) || !isNaN(Globalize.parseFloat(value));
} 

$.validator.methods.range = function (value, element, param) {
    return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}

Globalize.parseFloat => Ceci remplacera tout ce qui contient ',' à '.' si vous avez sélectionné une culture qui l'exige.

Après cela .. Vous devez ajouter. Cela rendra les fonctions de globalisation compatibles avec la culture.

$(document).ready(function () {
        Globalize.culture('fr-CA');

        // Only there to show which culture are being used.
        console.log(Globalize.culture().name);
});

Le code complet ressemble à ...

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>


<script type="text/javascript">

    $.validator.methods.number = function (value, element) {
        return this.optional(element) || !isNaN(Globalize.parseFloat(value));
    } 
    $.validator.methods.range = function (value, element, param) {
        return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
    }

    $(document).ready(function () {
        Globalize.culture('fr-CA');

        // Only there to show which culture are being used.
        console.log(Globalize.culture().name);
    });
</script>

</head>

<body>
    @RenderBody()
</body>
</html>
21
Rushino

Eh bien, pour résoudre le même problème, j'ai:

$.validator.addMethod("price",function(value){
    return /^(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
});

puis utilisé la méthode ajoutée comme règle:

$("#form").validate({
    rules: {
        price: "price"
    }
});

J'ai «emprunté» l'expression rationnelle du validateur au plug-in de validation lui-même et inversé les points . et les virgules , (séparateur de milliers X séparateur décimal).

2
J. Bruni

Pour une raison quelconque, j'ai dû changer ma référence de globalisation en:

<script src="@Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script>

à

<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script>

Et cela a résolu mon problème. Je suis devenu fou pendant 30 minutes jusqu'à ce que je réussisse. Si quelqu'un peut expliquer pourquoi je vais approuver.

0
user3520884