jQuery Validationプラグインの共通エラーメッセージを日本語化する方法

jquery-validation-ja
  • URLをコピーしました!

jQueryバリデーションプラグインの中で3本指に入る(と勝手に思っている)jQuery Validationプラグイン日本語化する方法をご紹介。
ちなみに、3本指のあとの2本は、jQuery Validation EngineBootstrap Validator(と勝手に思っている)です。

目次

サクッと日本語化

って言っても、公式の日本語ファイルが既に用意されています。
お決まりのCDNから取得します。

cdnjs
jquery-validate - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for ... Client-side form validation made easy - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5...

[~/localization/messages_ja.js]が日本語ファイルになります。
それでは早速、scriptタグで読み込みます。

バリデーションメッセージの変更

JavaScriptファイルの中には、以下のように日本語化されたバリデーションエラーメッセージが配列で書かれてあります。
バリデーションメッセージ自分好みに変更したい場合は、CDNを利用せずに日本語ファイルをダウンロードして変更しましょう。

バリデーションメッセージの変更例

以下の例では、必須(required)とメールアドレス(email)バリデーションメッセージを変更した例になります。

バリデーションメッセージを項目別に変更

以下のように、それぞれの入力フォーム毎にメッセージを変更することもできます。
この方法だと、一応日本語ファイルすら不要ですが、あるものは使った方が楽チンです。

もっと便利な使い方

下記の参考サイトに書かれていた方法が、私にとってはとても画期的でした。
例えば、requiredバリデーションメッセージに項目名を入れたい場合に引数で入れる方法があるようです。(知らなかった…)

まずは、[messages_ja.js]内のメッセージのフィールド名を入れたい場所{1}を書きます。
(min、max、rangeなどを参考にしてください)

そして、rules第2引数にフィールド名を追記します。

すると結果は、

と表示されるわけです。
となると、引数をフィールドのラベルから自動取得する場合は、

と書けばいいのかな。
情報ありがとうございました。

説明は以上です。
このように、jQuery Validationプラグインは自由度が高くて使いやすいです。
次回はカスタムバリデーションを追加する方法を紹介します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

CAPTCHA


目次