web-dev-qa-db-ja.com

MVC / JQuery検証では、小数点としてコンマを使用できません

2018年7月1日更新

これはMVCの問題ではなくjQueryの問題であることが示唆されていましたが、MVCの問題だと思います。 asp.net core 2.0 MVCでアプリ全体を作成しましたが、エラーが続きます。それをMVCにリンクしているのは、モデルに[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]行を追加することで日付検証の問題を解決できるという事実です。したがって、MVCは検証に影響を与えます。したがって、MVCでこれを修正する方法があると思います（これを参照してください post ）。 asp.net core 2.0の回答を投稿してください。

オリジナルポスト

MVC5ページで、テキストボックスにDoubleプロパティをレンダリングします。ページがロードされると、ドイツ語システムでページが実行されるため、値は小数点記号として「、」とともに表示されますが、これは正しいです。フォームを保存する場合、検証エラーが発生します。これはどのように解決できますか？トピックにいくつかの質問があることは知っていますが、私が見る限り、それらのほとんどは時代遅れです...私はまだ苦労しています、さまざまな国のユーザーがMVCアプリで動作します。

モデル：

[DisplayFormat(DataFormatString = "{0:n2}", ApplyFormatInEditMode = true)]
public Double Gewicht
{
    get { return gewicht; }
    set { gewicht = value; OnPropertyChanged(new PropertyChangedEventArgs("Gewicht")); }
}

CSHTML：

<div class="form-group">
    @Html.LabelFor(model => model.Gewicht, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-8">
        @Html.EditorFor(model => model.Gewicht, new { htmlAttributes = new { @class = "form-control col-md-1" } })
        @Html.ValidationMessageFor(model => model.Gewicht, "", new { @class = "text-danger" })
    </div>
</div>

Web.config

<globalization uiCulture="de-DE" culture="de-DE" />

ロード後のボックス->小数点区切り記号としてコンマをロードした値 enter image description here

送信ボタンがクリックされた後のボックス->同じ値の検証エラー

enter image description here

コンマの後のボックスはポイントに変更されます->検証エラーなし enter image description here

2018年5月1日更新

here に示されている解決策を試しましたが、残念ながらこれはうまくいきません。しかし、値が受け入れられないだけでなく、グループ区切り文字と小数点区切り文字が混在する数値に変更されることも発見しました（図を参照）。何が起こるかというと、22の値が22.5に変更され、データベースに保存されます。結果として、2,250.00の値がデータベースに保存されます。

enter image description here

2018年7月1日更新

また興味深いのは、日付フィールドがドイツ形式を完全に受け入れているという事実です。

物件

private DateTime? inbetriebnahmedatum;

[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime? Inbetriebnahmedatum
{
    get { return inbetriebnahmedatum; }
    set { inbetriebnahmedatum = value; OnPropertyChanged(new PropertyChangedEventArgs("Inbetriebnahmedatum")); }
}

以下に示す値は、エラーなしで受け入れられ、処理されます。 enter image description here

2018年7月1日更新-2

Edit.cshtmlの行を

<input asp-for="Gewicht" class="form-control" />

に

<input name="Gewicht" id="Gewicht" type="number" class="form-control" value="@Model.Gewicht"/>

検証エラーなしで、フォームを値「23,7」で送信できます。コントローラーでは、バウンドモデルプロパティは「237」の値を示し、IFormCollectionは「23.7」の値を示します。これは、モデルバインダーの問題を示唆しています。

c#jqueryasp.net-mvcasp.net-core
17
Mister 832

これはMVCの問題ではなくjQueryの問題であることが示唆されていましたが、MVCの問題だと思います。

いいえ、それは正しくありません。クライアント側の検証エラーが表示されるのは、デフォルトでは、jquery.validate.js（Microsoftに関連付けられていない独立したサードパーティプラグイン、MVCがクライアント側の検証に使用する）が、.ではなく、,（ドット）である小数点に基づいて数値を検証するためです（コンマ）。

MVCはサーバー側のコードであり、ブラウザーでは実行されません。クライアント側の検証を実行するために、フォームコントロールを生成するMVCのHtmlHelperメソッドは、実行される検証を記述するために使用されるHTMLのdata-val-*属性のセットをレンダリングし、DOMのロード時にjquery.validate.unobtrusive.jsプラグインによって解析されます、およびそれらを使用してルールを$.validatorに追加します。

doubleプロパティの場合、（data-val-number属性に加えて）data-val-required属性を追加します。これにより、次のように定義されるnumberルールが追加されます。

// http://docs.jquery.com/Plugins/Validation/Methods/number
number: function( value, element ) {
    return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
},

ここで、小数点区切り記号はドットで、千単位区切り記号はコンマです（おそらく、プラグインは米国で開発されたため、米国形式を使用しているためです）。

jquery.globalize などのプラグインを使用するか、次のスクリプトを含めることで実行できるデフォルトの動作を上書きする必要があります（正規表現はドットとコンマを入れ替えるだけです）

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

上記のスクリプトはjquery.validate.jsスクリプトの後にある必要がありますが、$(document).ready()でラップされていないことに注意してください。

私にとってMVCにリンクしているのは、モデルに行[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]を追加することで日付検証の問題を解決できるという事実です。

実際には、生成されるhtmlに影響を与える[DisplayFormat]属性と組み合わせた[DataType(DataType.Date)]属性。 [DataType]属性は<input type="date" ... />を生成し、ブラウザーがサポートしている場合、ブラウザーはHTML-5のdatepickerをレンダリングします。仕様に従って、形式はyyyy-MM-dd（ISO形式）である必要があるため、[DisplayFormat]属性も必要です。

HTML-5 datepickerは、ブラウザーカルチャで日付をレンダリングします。入力が26.1.2018であることが示されている画像は、ブラウザカルチャーがde-DEであるためですが、自分のカルチャーが26/1/2018（オーストラリア）であるため、入力にen-AUが表示されます。あなたのサイト、彼らは1/26/2018を見ます。

クライアント側の検証が日付プロパティに対して機能する理由は、jquery.validate.jsプラグインにUS形式（MM/dd/yyyy）とISO形式（yyyy-MM-dd）の両方の日付ルールが含まれているためです。

@Html.TextBoxFor(m => m.Inbetriebnahmedatum)（[DataType]および[DisplayFormat]属性を無視する）を使用し、入力に26.1.2018を入力した場合、クライアント側の検証エラーも表示されます。

24
user3559349

私は問題がjqueryバリデーターであると思うので、コンマ/ポイントエラーを解決するために使用されます

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

試してみてください

2
Dans

より堅牢な解決策は、コンマ区切りの数値を10進数で区切られた数値に変換する独自の関数でバリデーターメソッドをラップすることです。

1つの秘isは、.callを使用して、「this」が開発者が考えた元のthisであるかのように、元のバリデータ関数を呼び出すことです（たとえば、ステップ検証に関数「this.optional」を使用します）。

var originalNumber = $.validator.methods.number;
var wrappedNumber = function (value, element) {
    var fixedValue = parseFloat(value.toString().replace(",", "."));
    return originalNumber.call($.validator.prototype, fixedValue, element);     // Call function as if "this" is the original caller
};
$.validator.methods.number = wrappedNumber;

この機能は、任意のバリデーター、たとえばステップ検証：

var originalStep = $.validator.methods.step;
var wrappedStep = function (value, element, param) {
    var fixedValue = parseFloat(value.toString().replace(",", "."));
    return originalStep.call($.validator.prototype, fixedValue, element, param);
};
$.validator.methods.step = wrappedStep;
1
Peheje