MVC 3 jQuery Validation/globalisation d'un champ numérique/décimal

Question

Lorsque vous utilisez la globalisation culture="da-DK" dans le fichier Web.config, la validation jQuery ne fonctionne pas.

Au Danemark, nous utilisons la notation 19,95 au lieu de la notation américaine 19.95 lorsque nous écrivons le prix d'un produit, et cela m'a posé un problème que je n'arrive pas à résoudre.

J'ai démarré VS2010, un nouveau projet MVC 3, ajouté un homeController, une classe de produit et une simple vue d'édition standard et l'erreur est déjà présente.

Classe de produit :

public class Product
{
    public string name { get; set; }
    public string itemNo { get; set; }
    public decimal price { get; set; }
}

HomeController :

public class homeController : Controller
{
    public ActionResult Index()
    {
        var product1 = new Product { name = "Testproduct", itemNo = "PRD-151541", price = 19 };
        return View(product1);
    }
}

Vue de l'index :

@model WebUI.DomainModel.Product

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

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.itemNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.itemNo)
            @Html.ValidationMessageFor(model => model.itemNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

Le résultat :

Malheureusement, je ne peux pas soumettre une image ici - alors suivez ce lien pour voir le résultat : http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

Ainsi, lorsque vous exécutez le site Web, le champ est défini sur 19,00 - ce qui est la définition correcte de la culture - mais lorsque vous essayez d'enregistrer, la validation échoue.

S'il vous plaît, aidez-moi...

Answer 1

Vous pouvez essayer le Plugin jQuery Globalization de Microsoft :

<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/jquery.glob.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globinfo/jquery.glob.da-dk.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN($.parseFloat(value));
    }

    $(function () {
        $.preferCulture('da-DK');
    });
</script>

---

Le plugin a été renommé et déplacé, vous devriez utiliser Mondialiser (Mar 2012)

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN(Globalize.parseFloat(value));
    }

    $(document).ready(function () {
        Globalize.culture('da-DK');
    });
</script>

Plus d'informations à ce sujet sur Article de blog de Scott Hanselman

---

Answer 2

Mise à jour de script pour la version actuelle de https://github.com/jquery/globalize avec support d'éléments optionnels

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

$(function () {
    Globalize.culture('%%culture%%');
});

Answer 3

@shatl a la bonne réponse à ce jour. Note pour l'attribut range vous aurez besoin d'un hack présenté ci-dessous. Le code complet à ajouter est montré ci-dessous :

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="~/Scripts/globalize.js"></script>
    <script type="text/javascript" src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });

        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });
    </script>
}

Answer 4

J'ai essayé le bout de code de Darin, mais cela ne fonctionne pas ($.preferCulture('da-DK') ; n'est pas pris en charge). Y a-t-il un changement dans la nouvelle version ?

Answer 5

J'ai fini par suivre les conseils du blog de Scott Hanselman à ce sujet - vous pouvez le lire ici :

http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx

J'ai dû faire quelques changements pour utiliser Globalize au lieu de jQuery Global (maintenant jQuery Global est mort). Je l'ai écrit dans l'article de blog suivant au cas où cela serait utile :

http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html