翻译自定义 jQuery 验证消息

Question

我有一个关于 jQuery 验证 plugin 的问题要问。

我已经使用本地化来更改以西班牙语显示的错误消息的默认语言，但是我找不到任何关于要翻译的自定义消息的信息。有什么线索吗？

例如

我已经包含了西班牙语的翻译文件，这是我的代码：

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

"This field is required" 等默认消息以西班牙语显示，现在我想将上述消息翻译成西班牙语，但我找不到定义翻译文本的位置和方式。

Answer 1

插件没有 "translated"。翻译是手动完成的，然后您将这些新消息放入 a localization file 并覆盖默认值。

还有没有这样的.validate() option called lang anywhere in this plugin.

使用本地化文件只是意味着在包含插件后将文件原样包含在某个地方...

<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" />

然后所有默认消息都将使用西班牙语。

Default messages like "This field is required" etc are appearing in Spanish, now I want to translate the above message to Spanish but I cannot find where and how to define the translated text.

包括西班牙语本地化文件只是告诉插件替换由西班牙语本地化文件定义的默认消息。

您的 messages 对象会覆盖这些默认消息，因此如果您希望西班牙语消息覆盖单个输入字段的 required 规则，那么您需要用西班牙语写那个。 没有可以即时翻译您的消息的内置动态翻译。

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

这是使用的消息的优先级：

使用 .validate() 中的 messages 对象或类似方法按规则或整个字段为单个字段声明的任何文本。
如果第 1 项中未定义任何内容：覆盖 $.extend( $.validator.messages, {...}) 定义的插件默认消息。这就是本地化文件的工作方式。
如果项目 #2 中未定义任何内容：插件定义的默认消息（英语）。

现在，如果您需要动态地更改.validate()之后messages对象定义的任何消息已在您的表单上初始化插件，您必须使用 .rules('add') 方法覆盖它。

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

演示：jsfiddle.net/3fLkf47u/

Answer 2

所以我制作了简单的脚本来根据接受的答案翻译验证消息

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);
      });

希望这对某人有所帮助

Answer 3

您可以使用名为 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>

一旦你使用 abValidate 库初始化你的 for，你只想在 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 link:
https://github.com/aslamanver/abvalidate

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

翻译自定义 jQuery 验证消息

Translate custom jQuery validation messages

jquery

translation

localization

jquery-validate