jQuery验证：更改默认错误消息

Question

是否有一种简单的方法可以更改jQuery验证插件中默认的错误值？

我只想将错误消息重写为与我的应用更符合个性化需求--由于我的字段很多，所以我不想为每个字段单独设置消息...我知道我可以这样做！

- Kevin Brown

Answer 1

将此代码添加到一个单独的文件/脚本中，在验证插件之后被包含，以覆盖消息并随意编辑 :)

jQuery.extend(jQuery.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.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "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("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("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});

- Nick Craver

---

非常好用。我只是添加了以下内容： $.extend($.validator.messages, { required: "必填" }); - Ravi Ram

我将其用作多语言表单的快速修复方法：if($('body').attr('lang')=="es"){ jQuery.extend... }; - Heraldmonkey

@NickCraver，我只想说我从未预料到这个问题会得到这么多点赞…恭喜你给出了一个及时且快速的答案！ - Kevin Brown

抱歉，工作不正常。没有显示任何消息，只显示所需的消息，尽管我使用了最小长度限制。 - Pratik Joshi

我们可以在错误消息中包含表单元素名称，而不仅仅是一般的消息。例如：“登录字段是必填项”，而不是“此字段是必填项”。 - Musaddiq Khan

Answer 2

你可以在 validate 调用中指定自己的消息。从Validation插件文档中使用Remember the Milk注册表单中提取和缩写此代码(http://jquery.bassistance.de/validate/demo/milk/)，你可以轻松地指定自己的消息:

var validator = $("#signupform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2,
            remote: "users.php"
        }
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
});

validate(...)的完整API: http://jqueryvalidation.org/validate

- Steven

---

感谢您的输入，但如果您更仔细地阅读问题，我正在询问如何更改默认设置。我知道我可以指定独特的消息。 - Kevin Brown

只是插话一下——这对我很有帮助，即使与问题无关。 - Brien Malone

是的，这实际上看起来比更改默认设置更好的主意，尽管这是原始提问者最初要求的。 - Roger

@LisaCerilli 我也遇到了同样的问题，通过将 jQuery.format("... 更改为 jQuery.validator.format("... 解决了它。 - lehel

我知道这很老，但第一个链接已经失效了。 - akousmata

Answer 3

这对我有用：

$.validator.messages.required = 'required';

- Josh

---

$.validator.messages.maxlength = jQuery.validator.format("请不要输入超过{0}个字符。");无效。我建议使用Nick Cravers的解决方案。 - Vidar Vestnes

@VidarVestnes 这个解决方案也适用于您的情况。您只需指定格式字符串，插件就会自动完成其余部分：$.validator.messages.maxlength = "请输入不超过 {0} 个字符。"; - rusmus

Answer 4

这对我有用：

// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: "required email",
        },
        messages: {
            firstname: "Enter your First Name",
            lastname: "Enter your Last Name",
            email: {
                required: "Enter your Email",
                email: "Please enter a valid email address.",
            }
        }
    })

- Mahmoud Fadel

---

请注意，即使此答案是针对jqueryValidation而不是jqueryFileUpload，$().fileupload函数中也有messages选项。 - Xavier Portebois

Answer 5

由于我们已经在使用 JQuery，因此我们可以让页面设计师将自定义消息添加到标记中而不是代码中：

<input ... data-msg-required="my message" ...

或者，使用一个在所有字段上都有单个短的 data-msg 属性的更通用的解决方案：

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

然后代码包含类似于这样的内容：

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

- user1207577

---

这是一个很好的策略，特别是当你需要一个动态消息集而不在你的js文件中时... - Charles Harmon

@user1207577，是的，我们可以设置自定义消息，但是如何显示最小长度和最大长度的消息呢？我的意思是，如果我们设置了自定义消息，则不会显示最小和最大消息。有什么想法吗？ - Naren Verma

Answer 6

另一个可能的解决方案是循环处理字段，并将相同的错误消息添加到每个字段中。

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

- Ganske

---

这个解决方案正是我所需要的……在我的情况下，每个表单字段都有一个标签，因此我找到它对应的标签并将其添加到消息前面，最终显示为“名字是必填项”。非常好，Ganske。 - tjans

虽然其他答案都是正确的，但这就是我要找的语法。 - scott.korin

Answer 7

不必更改插件源代码，您可以包含一个格式类似于下载本地化文件夹中的文件的附加JS文件，并在加载validation.js之后包含该文件。

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});

- jitter

---

不是这样的。从技术上讲，它与您的答案相同。我在旧版本的您的答案下发表了我的评论，然后写了自己的答案。所有这些都是在不断刷新页面的情况下完成的。因此，当查看您的评论时，我才看到您编辑过的答案。 - jitter

Answer 8

jQuery表单验证自定义错误消息 - tutsmake

演示

$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      firstname: {
      required: "Please enter first name",
     },      
     lastname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter email address",
      email: "Please enter a valid email address.",
     },
    },
  
  });
});

<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
  .error{
    color: red;
  }
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">
 
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>
 
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
 
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[e-mail]"><br>
 
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
 
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
 
</body>
</html>

- Developer

Answer 9

@Josh：你可以从资源包中翻译消息，并扩展你的解决方案。

<script type="text/javascript">
    $.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

如果您将此代码部分放入您的_Layout.cshtml中（MVC），则对于所有视图都可用。

- Krolock

Answer 10

我从未想过这会如此容易，我正在处理一个处理此类验证的项目。

下面的答案对于想要轻松更改验证消息的人将非常有帮助。

以下方法使用“占位符名称”代替“This Field”。

你可以轻松修改事物。

   // Jquery Validation   
   $('.js-validation').each(function(){

       //Validation Error Messages 

       var validationObjectArray = [];

       var validationMessages = {};

       $(this).find('input,select').each(function(){  // add more type hear

          var singleElementMessages = {};

          var fieldName = $(this).attr('name');

          if(!fieldName){  //field Name is not defined continue ;
              return true;
          }


          // If attr data-error-field-name is given give it a priority , and then to placeholder and lastly a simple text

          var fieldPlaceholderName = $(this).data('error-field-name') || $(this).attr('placeholder') || "This Field";

          if( $( this ).prop( 'required' )){

              singleElementMessages['required'] = $(this).data('error-required-message') || $(this).data('error-message')  || fieldPlaceholderName + " is required";

          }

          if( $( this ).attr( 'type' ) == 'email' ){

              singleElementMessages['email'] = $(this).data('error-email-message') || $(this).data('error-message')  || "Enter valid email in "+fieldPlaceholderName;

          }       



          validationMessages[fieldName] = singleElementMessages;

       });


       $(this).validate({
          errorClass   : "error-message",
          errorElement : "div",
          messages     : validationMessages  
       });  
   });  

- sanjeev

---

谢谢你分享这个。使用“errorClass”和“errorElement”是天才！我现在可以应用来自验证创建的错误消息的样式和位置！ - justdan23