数字を 3 桁でコンマ区切りする JavaScript と ASP.NET MVC5 のクライアント側での検証の話です。
元の話は Teratail のスレッド「3桁コンマ区切り数字をコンマ無しでFrom送信したい」です。
コンマ区切り用 JavaScript のコードの動作は、初期画面では数字を 3 桁でコンマ区切りし、ユーザーが編集するときはコンマを除去し、編集完了後は再び 3 桁でコンマ区切りするというものです。コードは Teratail のスレッドの私 SurferOnWww の回答にありますので見てください。
そのコンマ区切り用 JavaScript の動作と、以下のようにモデルにアノテーション属性を付与するとデフォルトで有効になる控えめな JavaScript による検証が、かなり微妙ながら基本的なところでは整合を取って動きましたので、備忘録として書いておくことにしました。（実は、バッティングして動かないと思い込んでました（汗））
public class PurchaseRecord
{
// ・・・中略・・・
[Display(Name = "価格")]
[Required(ErrorMessage = "{0} は必須")]
[RegularExpression(@"^\d{1,6}$",
ErrorMessage = "数字 1 ～ 6 文字")]
[Range(100, 10000,
ErrorMessage = "{0}は{1}～{2}の間で入力してください。")]
[DisplayFormat(DataFormatString = "{0:N0}",
ApplyFormatInEditMode = true)]
public decimal Price { get; set; }
}
どのような動きになるかと言うと以下の通りです：
-
テキストボックスの初期表示は 1,234
-
ユーザーが編集動作に入る時 focus イベントが発生しスクリプトで 1234 に書き換わる
-
ユーザーが例えば 3210 というように編集
-
次の作業に移るためフォーカスを外す
-
change イベントが発生し 3210 に対し検証がかかる
-
blur イベントが発生しスクリプトで 3,210 に書き換える
-
ユーザーが送信ボタンをクリック
-
submit イベントが発生しスクリプトで 3,210 を 3210 に書き換える
-
サーバーで 3210 を受信、サーバー側での検証は OK となる。
・・・という順序になってうまくいきます。
以上、基本的な動きは OK ではあるものの、かなり微妙なところで動いていますので、実際に運用に使う場合は十分な検証が必要だと思います。思いつくのは：
(1) change ⇒ blur の順序でイベントが発生しなければならないが、全てのブラウザでそうかは不明。（メジャーなブラウザは大丈夫のようですが、昔の Forefox は反対だったという話があります）
(2) 上のステップ 3 でユーザーが数字だけ入力してくれると期待するのは無理がある。（上のサンプルでは RegularExpression 属性を追加してチェックするようにしてますが、それで十分か？）
(3) ユーザーがブラウザの JavaScript を無効にした場合はサーバー側だけで検証することになる。
・・・などです。
特に、不特定多数のユーザーが不特定多種のブラウザでアクセスしてくるインターネットに公開するような場合は別の方法（サーバー側だけで検証するとか、String 型にするとか）を考えた方が良いかもしれません。
今のところ気が付いた問題点は以下の通りです：
問題 1: ステップ 3 でユーザーが 3,210 とカンマを入れて入力すると、ステップ 5 の時点ではカンマ入りなので正規表現での検証で引っかかるという問題があります。
問題 2: コンマ区切り用 JavaScript のコードには全角 ⇒ 半角変換の機能が実装されていますが、タイミングの問題で検証に引っかかってしまいます。どういうことかと言うと、全角数字を入力するとステップ 6 の時点で半角に変換しますが、検証がかかるステップ 5 の時点ではまだ全角なので正規表現による検証で NG となります。
その後、ステップ 6 の時点で半角に変換されるので、見かけは正しく半角なのにエラーが出て混乱を招くと思います。なので、全角 ⇒ 半角変換のコードは削除した方がよさそうです。
最後にオマケを二つ書いておきます。
その 1: 上のステップ 2 で編集操作に入った時、キャレットが末尾にあるのが自然と思いますが、そうしたい場合は以下のように 2 行追加してください。
elm.addEventListener('focus',
function () {
this.value = delFigure(this.value);
// キャレットを文字列の末尾に持ってくる
// ため以下の 2 行を追加
var len = this.value.length;
this.setSelectionRange(len, len);
}, false);
その 2: クライアント側での検証を無効にすると「価格」として有効でない文字列、例えば 123x とかでもサーバーに送信されてしまいます。その場合、モデルバインディングできないのでアノテーション属性に設定した検証がかかる以前にエラーとなります。
そのエラーメッセージが気に入らないので自分で設定したいという場合は Controller にコードを追加して書き換えることができます。詳しくは別の記事「int 型プロパティの検証、エラーメッセージ」を見てください。