如何更改 JQuery 验证器语言消息

Question

我正在使用来自 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 的 JQuery Validator。我怎样才能使消息是自定义的而不是英文的。

Answer 1

如果您查看“本地化”目录，您会发现不同的 .js 文件包含不同语言的错误消息。 [类似于“messages_XX.js”]

选择您需要的语言的文件，只需在包含 jquery.validate.js 之后将以下行添加到标记中

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

Answer 2

这样做：

$(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'
  });

请参阅these instructions 了解更多信息。

Answer 3

最好的方法是在需要时像这样扩展插件

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

Answer 4

这将是您初始验证脚本中的 JSON 结构，例如 Alex has：

   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 文件，或者使用您的有它。这种特殊的方法对我很有效。

Answer 5

如果您使用npm / yarn 来管理您的资产，您可以像这样简单地导入本地化文件（当然是替换iso代码，这里是法语）：

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

然后使用：

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

Answer 6

您也可以将错误消息直接放在标记中，如下所示：

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

见documentation

如果您使用某种本地化插件，您可以将消息移到单独的文件中。这里我使用 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"
                        }
                    }
             }
        }
 }

Answer 7

看看我的解决方案

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

这个函数abp.localization.localize(Key)返回基于当前文化的本地化字符串，这个函数来自我使用的框架aspnetboilerplate

有关更多信息，请参阅此堆栈溢出线程jQuery validation: change default error message

Answer 8

使用messages 对象。

定义自定义的键/值对 消息。键是一个名称 元素，值要显示的消息 对于那个元素。而不是平原 向另一张地图发送特定信息 可以使用每个规则的消息。 覆盖标题属性 元素或默认消息 方法（按此顺序）。每一条消息 可以是字符串或回调。这 回调在范围内被调用 验证器和规则的 参数作为第一个和 元素作为第二个参数，它 必须返回一个字符串以显示为 消息。

示例

$(".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 name@domain.com"
     }
   }
})

Source.

Answer 9

对于 PHP，我已经这样做了。

$.validator.messages = $.extend({}, $.validator.messages, {
        required: '<?= __("This field is required.") ?>',
        remote: '<?= __("Please fix this field.") ?>',
        email: '<?= __("Please enter a valid email address.") ?>',
        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.") ?>',
        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}.") ?>' ),
        step: $.validator.format( '<?= __("Please enter a multiple of {0}.") ?>' )
    })

因此语言会根据 gettext 更改，这些错误消息也会更改。

Answer 10

这对我有用：

 $.validator.messages.required = 'Your Message For required Fields ...';
 var validator = $("#formComplexe").validate();
 validator.form();

我用过这个插件：

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>

Answer 11

语言如下：https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/localization/

使用 ASP.NET WebForms，我的 Site.Master 中有这个：

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/localization/messages_es.js" type="text/javascript"></script>

请注意，本地化文件名以es 结尾。然后在一个 .aspx 文件中：

$('#myForm').validate({
   lang: 'es' // as the filename ends
});

Answer 12

只需在定义验证的 json 中输入一个“必需”值。检查演示源，但它在消息类别中

Answer 13

游戏迟到了，但如果您对多种语言使用相同的模板，则可以内联：

if($('html').attr('lang')=='he'){
    $('form').validate({
        messages: {
            email:  "חובה",
            phone:  "חובה",
            zip:    "חובה"
        }
    });
}else{
    $('form').validate({
        messages: {
            email:  "Required",
            phone:  "Required",
            zip:    "Required"
        }
    });
};