サイトアイコン IT NEWS

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

管理者
jquery-validation-ja

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

サクッと日本語化

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

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

<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を利用せずに日本語ファイルをダウンロードして変更しましょう。

$.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）のバリデーションメッセージを変更した例になります。

・・・
required: "この項目は必須です。",
email: "メールアドレスが正しくありません。",
・・・

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

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

$("form").validate({
    rules: {
        name :{
            required: true
        }
    },
    messages: {
        name :{
            required: "お名前を入力してください。"
        }
    }
});

もっと便利な使い方

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

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

$.extend($.validator.messages, {
    // required: "このフィールドは必須です。",
    required: "{1}を入力してください。",
    ...

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

$("form").validate({
    rules: {
        name: {
            required: [true, 'お名前']
        }
    }
});

すると結果は、

お名前を入力してください

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

required: [true, $('label[for="name"]').text()]

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

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

モバイルバージョンを終了