web-dev-qa-db-ja.com

カスタムjQuery検証メッセージを翻訳する

JQueryの検証について質問があります プラグイン 。

ローカリゼーションを使用して、スペイン語で表示されるエラーメッセージのデフォルト言語を変更しましたが、翻訳されるカスタムメッセージに関して何も見つかりません。手がかりはありますか？

例えば

スペイン語の翻訳ファイルを含めました。これが私のコードです。

$('.signup-form').validate({
    lang : 'es',
    rules:{
        tandc : {required : true}
    },
    messages:{
        tandc : {required : "You have to accept terms and conditions to proceed further"}
    }
})

「このフィールドは必須です」などのデフォルトのメッセージがスペイン語で表示されているので、上記のメッセージをスペイン語に翻訳したいのですが、翻訳されたテキストをどこでどのように定義するかがわかりません。

jquerylocalizationjquery-validatetranslation
5
Rock Rathore

プラグインによって「翻訳」されるものはありません。翻訳は手動で行われ、これらの新しいメッセージを ローカリゼーションファイル に配置します。ここで、デフォルトが上書きされます。

no such.validate() option どこでもlangと呼ばれる このプラグインで 。

ローカリゼーションファイルを使用するということは、プラグインを含めた後、そのような場所にファイルを含めることを意味します...

_<script type="text/javascript" src="...path-to/jquery.validation/1.15.0/jquery.validate.js" />
<script type="text/javascript" src="...path-to/jquery-validation/localization/messages_es.js" />
_

その後、すべてのデフォルトメッセージはスペイン語になります。

「このフィールドは必須です」などのデフォルトのメッセージがスペイン語で表示されているので、上記のメッセージをスペイン語に翻訳したいのですが、翻訳されたテキストをどこでどのように定義するかがわかりません。

スペイン語のローカリゼーションファイルを含めると、スペイン語のローカリゼーションファイルで定義されているデフォルトのメッセージを置き換えるようにプラグインに指示するだけです。

messagesオブジェクトはこれらのデフォルトメッセージを上書きするため、スペイン語のメッセージで単一の入力フィールドのrequiredルールを上書きする場合は、そのメッセージを記述する必要があります。スペイン語で。 メッセージをその場で解釈できる組み込みの動的変換はありません。

_rules:{
    tandc : {
        required : true
    }
},
messages:{
    tandc : {
        required : "Tienes que aceptar los términos y condiciones de seguir avanzando"
    }
}
_

これは、使用されるメッセージの優先順位です。

  1. .validate()または同様のメソッド内のmessagesオブジェクトを使用して、ルールによって単一のフィールドまたはフィールド全体に対して宣言されたテキスト。

  2. 項目＃1で何も定義されていない場合：$.extend( $.validator.messages, {...})で定義されているプラ​​グインのデフォルトメッセージを上書きします。これがローカリゼーションファイルの仕組みです。

  3. 項目＃2で何も定義されていない場合：プラグインで定義されているデフォルトのメッセージ（英語）。

ここで、動的にmessagesオブジェクトで定義されているメッセージを変更する必要がある場合.validate()がフォームのプラグインを初期化した後、.rules('add')メソッドを使用してプラグインをオーバーライドする必要があります。

_$('[name="foo"]').rules('add', {
    messages: {
        required: "yo! I'm required."
    }
});
_

デモ： jsfiddle.net/3fLkf47u/

14
Sparky

だから私は受け入れられた答えに基づいて検証メッセージを翻訳する簡単なスクリプトを作りました

function translateValidationMessages(currentLang) {
  message = {
    en: {
      required: "Required.",
      remote: "Please fix this field.",
      email: "Wrong email.",
      url: "Please enter a valid URL.",
      date: "Please enter a valid date.",
      dateISO: "Please enter a valid date (ISO).",
      number: "Please enter a valid number.",
      digits: "Please enter only digits.",
      creditcard: "Please enter a valid credit card number.",
      equalTo: "Please enter the same value again.",
      maxlength: $.validator.format("Please enter no more than {0} characters."),
      minlength: $.validator.format("Please enter at least {0} characters."),
      rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
      range: $.validator.format("Please enter a value between {0} and {1}."),
      max: $.validator.format("Please enter a value less than or equal to {0}."),
      min: $.validator.format("Please enter a value greater than or equal to {0}.")
    },
    et: {
      required: "See väli peab olema täidetud.",
      maxlength: $.validator.format("Palun sisestage vähem kui {0} tähemärki."),
      minlength: $.validator.format("Palun sisestage vähemalt {0} tähemärki."),
      rangelength: $.validator.format("Palun sisestage väärtus vahemikus {0} kuni {1} tähemärki."),
      email: "Palun sisestage korrektne e-maili aadress.",
      url: "Palun sisestage korrektne URL.",
      date: "Palun sisestage korrektne kuupäev.",
      dateISO: "Palun sisestage korrektne kuupäev (YYYY-MM-DD).",
      number: "Palun sisestage korrektne number.",
      digits: "Palun sisestage ainult numbreid.",
      equalTo: "Palun sisestage sama väärtus uuesti.",
      range: $.validator.format("Palun sisestage väärtus vahemikus {0} kuni {1}."),
      max: $.validator.format("Palun sisestage väärtus, mis on väiksem või võrdne arvuga {0}."),
      min: $.validator.format("Palun sisestage väärtus, mis on suurem või võrdne arvuga {0}."),
      creditcard: "Palun sisestage korrektne krediitkaardi number."
    }
  };
    console.log("Translating validation messages to: "+currentLang);

  if (currentLang == "et") {
    $.extend($.validator.messages, message.et);
  } else {
    $.extend($.validator.messages, message.en);
  }

また、この関数は、たとえば言語のドロップダウンが変更されたときに呼び出すことができます

 $("#lang").change(function() {
        translateValidationMessages(this.value)
        console.log("Setting language to " + this.value);
      });

これが誰かを助けることを願っています

1
Mikk

abValidateというjQueryライブラリを使用して、ローカライズされた検証エラーメッセージを表示できます。

例：

$(document).ready(function () {
    $(".ab-form").abValidate({
        color: "#556b2f",
        backgroundColor: "white",
        debug: true
    });
});
<html>
   <head>
      <link rel="stylesheet" href="https://aslamanver.github.io/abvalidate/abValidate.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://aslamanver.github.io/abvalidate/abValidate.min.js"></script>
   </head>
   <body>
      <form class="ab-form" action="#">
         <div class="form-group">
            <input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more"
               name="name" class="ab-validation-i" />
            <div class="error"></div>
         </div>
         <br>
         <div class="form-group">
            <input type="submit" name="submit" value="Submit">
         </div>
      </form>
   </body>
</html>

ForをabValidateライブラリで初期化したら、すべてを以下のようにHTMLで記述します。

<input type="text" name="name" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" class="ab-validation-i" />

abValidate-Githubリンク：
https://github.com/aslamanver/abvalidate

参照：
https://medium.com/@aslamanver/localized-custom-validation-messages-jquery-2892e021648f

0
Googlian