翻译自定义jQuery验证消息

问题描述 投票:4回答:2

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

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

例如

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

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

像“这个字段是必需的”等默认消息出现在西班牙语中,现在我想将上述消息翻译成西班牙语,但我找不到在哪里以及如何定义翻译文本。

jquery localization jquery-validate translation
2个回答
14
投票

插件没有“翻译”任何东西。翻译是手动完成的,然后你将这些新消息放入a localization file,在那里他们覆盖默认值。

.validate() option也没有这样的lang叫做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" />

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

像“这个字段是必需的”等默认消息出现在西班牙语中,现在我想将上述消息翻译成西班牙语,但我找不到在哪里以及如何定义翻译文本。

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

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

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

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

  1. 使用messages或类似方法中的.validate()对象通过规则或整个字段为单个字段声明的任何文本。
  2. 如果项目#1中没有定义:由$.extend( $.validator.messages, {...})定义的覆盖插件默认消息。这是本地化文件的工作方式。
  3. 如果项目#2中没有定义:插件定义的默认消息(英语)。

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

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

但是:ぁzxswい


0
投票

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

jsfiddle.net/3fLkf47u/

例如,当语言下拉列表更改时,可以调用此函数

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

希望这有助于某人

© www.soinside.com 2019 - 2024. All rights reserved.