web-dev-qa-db-ja.com

jqueryのグローバリゼーションを機能させることができません

Jqueryの邪魔にならないクライアント検証でのコンマの問題を修正するために、jQueryグローバリゼーションプラグインを使用しようとしています。しかし、私は多くの解決策を試しましたが、これを修正するための良い解決策はありません。私は英語以外のローカリゼーションコンピューターを使用しています。これは、顧客が「123.66」ではなく「123,66」のような10進値を入力することが重要です。 ASP.NETの検証では、価格は数値でなければならないことがわかりました。え？真剣ですか ？笑

修正しようとすると、このjavascriptエラーが発生します。

$.global is undefined

ここに私のコードがあります。

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

理解できません。~/Scripts/globalize.jsを追加したので動作するはずです。

何か案が？または、クライアント検証を機能させるためのより良い解決策があり、10進値としてコンマを入力できるようにすることはできますか？

jquery-globalization
18
Rushino

カンマ区切り文字で小数の問題を最終的に取り除く方法を見つけました！

ここに結果の写真があります！これ以上の検証の問題はありません。

enter image description here

修正する手順。

1-取得 jQueryのグローバリゼーションライブラリ

最新のスクリプトを入手する必要があります。また、時代遅れの答えがいくつか見つかりました。
ライブラリを呼び出すオブジェクトは、もはや$.globalまたはそのようなものではなく、Globalizeです。

2-プロジェクトにスクリプトを含めます。 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-バリデーターのいくつかのメソッドを置き換えます。これにより、問題を引き起こしていた「number」および「range」検証のメソッドがオーバーライドされます。

$.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 =>これは、実際には「、」を含むものを「。」に置き換えます。それを必要とする文化を選択した場合。

この後..追加する必要があります。これにより、グローバル化機能が文化と連携するようになります。

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

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

完全なコードは次のようになります...

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

さて、同じ問題を解決するために、私はしました：

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

次に、追加されたメソッドをルールとして使用しました。

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

検証プラグイン自体からバリデーター正規表現を「借用」し、ドットを反転しました.およびコンマ,（千区切り文字X小数点記号）。

2
J. Bruni

何らかの理由で、グローバル化の参照を次の場所から変更する必要がありました。

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

に

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

そしてそれは私の問題を解決しました。私がそれを動かすまで30分間夢中になりました。誰かが私が感謝する理由を説明できるなら。

0
user3520884