web-dev-qa-db-ja.com

JQuery Validatorの言語メッセージを変更する方法

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ からJQuery Validatorを使用しています。メッセージがカスタムであり英語ではないようにするにはどうすればよいですか？.

jqueryjquery-validate
20
Luis Alvarado

次のようにします：

$(document).ready(function() {
  $("form#login").validate({
    lang: 'en'  // or whatever language option you have.
  });
});

指定する言語がデフォルトの言語のいずれでもない場合は、次を実行します。

$.tools.validator.localize("fi", {
    '*'          : 'Virheellinen arvo',
    ':email'     : 'Virheellinen sähköpostiosoite',
    ':number'    : 'Arvon on oltava numeerinen',
    ':url'       : 'Virheellinen URL',
    '[max]'      : 'Arvon on oltava pienempi, kuin $1',
    '[min]'      : 'Arvon on oltava suurempi, kuin $1',
    '[required]' : 'Kentän arvo on annettava'
});

  $("form#login").validate({
    lang: 'fi'
  });

詳細については、 これらの手順 を参照してください。

19
Dave Sag

「ローカリゼーション」ディレクトリを調べると、さまざまな言語のエラーメッセージが含まれるさまざまな.jsファイルを見つけることができます。 ["messages_XX.js"のようなもの]

必要な言語のファイルを選択し、jquery.validate.jsをインクルードした後、タグに次の行を追加するだけです

<script type="text/javascript" src="localization/messages_XX.js"></script>
32
andre_lost

最適な方法は、必要に応じてこのようにプラグインを拡張することです

$.extend($.validator.messages, {
    required: "my required message",
    ....
});
7
astroanu

Alex has のような初期検証スクリプトのJSON構造は次のとおりです。

   rules: {
        accntTypeCL: {
            required: true,
        },
        accntNoCL: {
            required: true,
            minlength: 19,
            numberDash: true,
        }
    },                      
    messages : {
        accntTypeCL : {
            required : Messages.ERR_TEST,
        },
        accntNoCL : {
            required : Messages.ERR_TEST,
            numberDash : Messages.ERR_TEST,
            minlength : Messages.ERR_TEST2,
        },
    }

//This would be in your messages.js file... But you'll need to make sure you are using a Java backend or something that will pull the messages.js correctly
//For IBM worklight this worked great       

    Messages = {
// Add here your messages for the default language. 
// Generate a similar file with a language suffix containing the translated messages

ERR_TOPLEVEL : '<span role=\"presentation\">One or more of the required fields was left blank or is invalid.<\/span>',
//Test Messages for tracing
ERR_TEST: 'This be the test yar!',
ERR_TEST2: 'This be the test2 yar!'
};

このようにして、同じ関数、同じ追加のメソッド、同じエラータイプを再利用し、ブラウザーで検出する必要のあるHTMLの言語に基づいて、またはそれを使用しているにもかかわらず、正しいmessages.jsファイルを使用することができます。この特定の方法は私にとってはうまくいきました。

5
isaac weathers

私のソリューションを見てください

_jQuery.extend(jQuery.validator.messages, {
        required: abp.localization.localize("FormValidationMessageRequired"),//"This field is required.",
        remote: "Please fix this field.",
        email: abp.localization.localize("FormValidationMessageEmail"),//"Please enter a valid email address.",
        url: abp.localization.localize("FormValidationMessageUrl"),//"Please enter a valid URL.",
        date: abp.localization.localize("FormValidationMessageDate"),//"Please enter a valid date.",
        dateISO: "Please enter a valid date (ISO).",
        number:  abp.localization.localize("FormValidationMessageNumber"),//"Please enter a valid number.",
        digits: "Please enter only digits.",
        creditcard: "Please enter a valid credit card number.",
        equalTo:  abp.localization.localize("FormValidationMessageDataEquals"),//"Please enter the same value again.",
        accept: "Please enter a value with a valid extension.",
        maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
        minlength: jQuery.validator.format(abp.localization.localize("FormValidationMessageMinlength")),//jQuery.validator.format("Please enter at least {0} characters."),
        rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
        range: jQuery.validator.format("Please enter a value between {0} and {1}."),
        max: jQuery.validator.format(abp.localization.localize("FormValidationMessageMax")),//jQuery.validator.format("Please enter a value less than or equal to {0}."),
        min: jQuery.validator.format(abp.localization.localize("FormValidationMessageMin"))//jQuery.validator.format("Please enter a value greater than or equal to {0}.")
    });
_

このfunc abp.localization.localize(Key)は、現在のカルチャに基づいてローカライズされた文字列を返します。この関数は、私が使用したフレームワークの aspnetboilerplate

詳細については、このスタックオーバーフロースレッドを参照してください jQuery検証：デフォルトエラーメッセージの変更

3
Basheer AL-MOMANI

次のように、エラーメッセージをマークアップに直接配置することもできます。

<input required data-msg="Please fill this field">
<input data-rule-minlength="2" data-rule-maxlength="4" data-msg-minlength="At least two chars" data-msg-maxlength="At most fours chars">

ドキュメント を参照してください

ある種のローカライズプラグインを使用する場合、メッセージを別のファイルに移動できます。ここではi18n-2（npmモジュール）を使用します。

<input id="email" type="email" name="email" data-msg=__("pages.apply.form.email.errormsg.required"))

次に、言語ファイルをフォルダーに入れます。

/locales
    da.json
    en.json

en.json

"pages": {
        "apply": {
            "subtitle": "Apply here",
            "form": {
                    "email": {
                        "title": "Email",
                        "placeholder": "Your email address",
                        "warning": "NB! DER AFSENDES EN MAIL HERTIL",
                        "errormsg": {
                            "required": "Enter a valid email address"
                        }
                    }
             }
        }
 }
2
olefrank

messagesオブジェクトを使用します。

カスタムメッセージを定義するキーと値のペア。キーは要素の名前、値はその要素に対して表示するメッセージです。プレーンなメッセージの代わりに、ルールごとに特定のメッセージを持つ別のマップを使用できます。要素のtitle属性またはメソッドのデフォルトメッセージを（この順序で）オーバーライドします。各メッセージは、文字列またはコールバックにすることができます。コールバックはバリデーターのスコープ内で呼び出され、ルールのパラメーターを最初に、要素を2番目の引数として、メッセージとして表示するストリングを返す必要があります。

例

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

ソース 。

1
alex

npm/yarnを使用してアセットを管理する場合、次のようにローカライズファイルをインポートできます（もちろんISOコードを置き換えてください、ここではフランス語です）。 ：

import 'jquery-validation';
import 'jquery-validation/dist/localization/messages_fr';

次に使用します：

$form.validate({
    lang: 'fr',
});
1
Vincent Decaux