web-dev-qa-db-ja.com

MVC 3 jQuery検証/数値/小数フィールドのグローバル化

Web.configファイルでグローバリゼーションculture = "da-DK"を使用すると、jQuery検証が機能しません。

デンマークでは、製品の価格を書くときに米国の方法19.95の代わりに表記19,95を使用しますが、それは私に解決できない問題を与えました。

VS2010、新しいMVC 3プロジェクトを開始し、homeController、Productクラス、および単純な標準編集ビューを追加しましたが、エラーは既にそこにあります。

製品クラス：

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);
    }
}

インデックスビュー：

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

結果：

残念ながら、ここに画像を送信することはできません。そのため、このリンクをたどって結果を確認してください。 http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

SO-Webサイトを実行すると、フィールドは19,00に設定されます-which IS正しいカルチャ定義-しかし、保存しようとすると、検証は失敗します。

助けてください...

jqueryvalidationasp.net-mvc-3globalizationculture
66
designvision.dk

Microsoftの jQuery Globalizationプラグイン を試すことができます。

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

プラグインの名前が変更されて移動されました。 Globalize （2012年3月）を使用する必要があります

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

これについての詳細は Scott Hanselmanブログ投稿

57
Darin Dimitrov

https://github.com/jquery/globalize の現在のバージョンのスクリプトを更新し、オプションの要素をサポート

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

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

今日の@shatlには正しい答えがあります。範囲属性については、以下に示すハックが必要です。追加する完全なコードを以下に示します。

@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>
}
14
RickAndMSFT

将来の参考のために、私のために働いたのは以下でした：

適切なjQueryバージョンと正しいカルチャを設定することを忘れないでください。この例ではデンマーク語です。
値にピリオドを含めることができない場合は、コメントのコメントを外します。

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
    type="text/javascript"></script>
<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/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) {
            // if (value.indexOf(".") >= 0) {
            //     return false;
            // }
            return (Globalize.parseFloat(value));
        }

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

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

最終的に、このトピックに関するScott Hanselmanのブログのアドバイスに従いました。これについては、こちらで読むことができます。

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

JQuery Globalの代わりにGlobalizeを使用するには、いくつかの変更を行う必要がありました（現在jQuery Globalは廃止されています）。これが役立つ場合に備えて、次のブログ投稿でこれを書きました。

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

1
John Reilly

プラグインなし

プラグインなしでこれを回避する最も簡単な方法は、次のようにデフォルトの検証をオーバーライドすることです。

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {            
        var regex = /^(\d*)(\,\d{1,2})?$/; //99999,99
        return regex.test(value);
    }
</script>

jquery.validate.jsのソースコードを見ると、上記のコードのような正規表現をテストするだけでなく、要素がオプションであるかどうかを検証することがわかります。

enter image description here

0
fabriciorissetto

私はアルゼンチン出身で、ずっと前にこの問題と戦っています。「、」を小数点記号として使用します。「コンマ」を書くとJavaScript検証が失敗しますが、「。」を入れるとモデルは受信します整数に変換された数値（55.60は5560になります）

この単純な解決策でこの問題を解決しました：

1st-次からの新しいcdnアドレスを使用して、jquery検証ライブラリをアップグレードしました： http://jqueryvalidation.org/

私のjavascriptに含めたリンクはこれです：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>

そして、あなたが特定の言語（私の場合はスペイン語）でそれを望むなら、この行も追加します：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/localization/messages_es.js"></script>

ESを希望の言語に置き換えます。

2nd-テンキーの10進数を許可する場合は、「。」を置き換える必要があります。 「、」を使用して適切に機能するように、次のコードをページに追加して自動的に実行します。

$('#txtCurrency').keyup(function () {

    $('#txtCurrency').val($('#txtCurrency').val().replace(/\./g, ','));

});

プレスト、問題は解決しました。

またね.

0
Yogurtu

いくつかの研究の後...私は解決策を見つけました。

Web.config in <system.web> add

<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>

HtmlHelperクラスを拡張する

namespace System.Web.Mvc
{
    public static class LocalizationHelper
    {
        public static IHtmlString MetaAcceptLanguage(this HtmlHelper html)
        {
            var acceptLang = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString());
            return new HtmlString(string.Format("<meta name=\"accept-language\" content=\"{0}\"/>", acceptLang));
        }
    }
}

_ Layout.cshtml<head>の最後に追加

@Html.MetaAcceptLanguage();
<script type="text/javascript">
    $(document).ready(function () {
        var data = $("meta[name='accept-language']").attr("content");
        $.global.preferCulture(data);
    });
</script>

これらの変更の後、Web GUIで10進数を操作できるようになりました。

よろしく、ジャコモ

0
gsscoder

このページをありがとう、トラブルをたくさん助けてくれたので、グローバル化コードを修正しなければなりませんでした。スウェーデンの文化はドットを区切り文字として受け入れませんが、parseFloatが基になるjavasacriptを使用するため、解析ドットは小数点区切り文字として受け入れられますが、サーバー側は拒否されます。これを修正するには、このようにparseFloatをオーバーライドします

Globalize.orgParaseFloat = Globalize.parseFloat;
Globalize.parseFloat = function(value) {
    var culture = this.findClosestCulture();
    var seperatorFound = false;
    for (var i in culture.numberFormat) {
        if (culture.numberFormat[i] == ".") {
            seperatorFound = true;
        }
    }

    if (!seperatorFound) {
        value = value.replace(".", "NaN");
    }

    return this.orgParaseFloat(value);
};

Githubでチケットを開いたので、これは修正されるでしょう

0
Anders