jQueryのバリデーションプラグインの中で3本指に入る（と勝手に思っている）jQuery Validationプラグインを日本語化する方法をご紹介。
ちなみに、3本指のあとの2本は、jQuery Validation EngineとBootstrap Validator（と勝手に思っている）です。
サクッと日本語化
って言っても、公式の日本語ファイルが既に用意されています。
お決まりのCDNから取得します。
[～/localization/messages_ja.js]が日本語ファイルになります。
それでは早速、scriptタグで読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/localization/messages_ja.js"></script> <script> $("form").validate({ rules: { name :{ required: true } } }); </script> |
バリデーションメッセージの変更
JavaScriptファイルの中には、以下のように日本語化されたバリデーション（エラー）メッセージが配列で書かれてあります。
バリデーションメッセージを自分好みに変更したい場合は、CDNを利用せずに日本語ファイルをダウンロードして変更しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$.extend( $.validator.messages, { required: "このフィールドは必須です。", remote: "このフィールドを修正してください。", email: "有効なEメールアドレスを入力してください。", url: "有効なURLを入力してください。", date: "有効な日付を入力してください。", dateISO: "有効な日付（ISO）を入力してください。", number: "有効な数字を入力してください。", digits: "数字のみを入力してください。", creditcard: "有効なクレジットカード番号を入力してください。", equalTo: "同じ値をもう一度入力してください。", extension: "有効な拡張子を含む値を入力してください。", maxlength: $.validator.format( "{0} 文字以内で入力してください。" ), minlength: $.validator.format( "{0} 文字以上で入力してください。" ), rangelength: $.validator.format( "{0} 文字から {1} 文字までの値を入力してください。" ), range: $.validator.format( "{0} から {1} までの値を入力してください。" ), step: $.validator.format( "{0} の倍数を入力してください。" ), max: $.validator.format( "{0} 以下の値を入力してください。" ), min: $.validator.format( "{0} 以上の値を入力してください。" ) }); |
バリデーションメッセージの変更例
以下の例では、必須（required）とメールアドレス（email）のバリデーションメッセージを変更した例になります。
|
1 2 3 4 |
・・・ required: "この項目は必須です。", email: "メールアドレスが正しくありません。", ・・・ |
バリデーションメッセージを項目別に変更
以下のように、それぞれの入力フォーム毎にメッセージを変更することもできます。
この方法だと、一応日本語ファイルすら不要ですが、あるものは使った方が楽チンです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$("form").validate({ rules: { name :{ required: true } }, messages: { name :{ required: "お名前を入力してください。" } } }); |
もっと便利な使い方
下記の参考サイトに書かれていた方法が、私にとってはとても画期的でした。
例えば、requiredのバリデーションメッセージに項目名を入れたい場合に引数で入れる方法があるようです。（知らなかった…）
まずは、[messages_ja.js]内のメッセージのフィールド名を入れたい場所に{1}を書きます。
（min、max、rangeなどを参考にしてください）
|
1 2 3 4 |
$.extend($.validator.messages, { // required: "このフィールドは必須です。", required: "{1}を入力してください。", ... |
そして、rulesの第2引数にフィールド名を追記します。
|
1 2 3 4 5 6 7 |
$("form").validate({ rules: { name: { required: [true, 'お名前'] } } }); |
すると結果は、
|
1 |
お名前を入力してください |
と表示されるわけです。
となると、引数をフィールドのラベルから自動取得する場合は、
|
1 |
required: [true, $('label[for="name"]').text()] |
と書けばいいのかな。
情報ありがとうございました。
説明は以上です。
このように、jQuery Validationプラグインは自由度が高くて使いやすいです。
次回はカスタムバリデーションを追加する方法を紹介します。
コメント
コメント一覧 （1件）
[…] jQuery Validationプラグインの共通エラーメッセージを日本語化する方法 […]