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


363

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

我只想重写错误消息以使其对我的应用程序更加个性化-我有很多字段,所以我不想为字段x单独设置消息...我知道我可以做到!

Answers:


732

将此代码添加到验证插件附带的单独文件/脚本中以覆盖消息,请随意编辑:)

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

31
很棒。我刚刚添加:$ .extend($。validator.messages,{必填:“必填”}});
拉维·拉姆

6
我用它作为多语言形式的快速修复:if($('body')。attr('lang')==“ es”){jQuery.extend ...};
Heraldmonkey 2013年

5
@NickCraver,只想说我从来没有想到过要对这个问题产生如此多的赞扬……并且为及时,快速地回答做好了!
凯文·布朗

3
无法正常工作,抱歉。尽管我使用了minlength,但没有显示任何消息,仅显示了必需的消息。
Pratik 2015年

2
我们可以在错误消息中包含表单元素名称吗?而不只是一般性消息。即登录字段是必填字段,而不是必填字段
Musaddiq Khan

239

您可以在验证调用中指定自己的消息。从Validation插件文档(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


7
感谢您的输入,但是如果您仔细阅读该问题,我会询问如何更改默认值。我知道我可以指定唯一的消息。
凯文·布朗

41
只是参与进来-这对我很有帮助,即使不是针对该问题。
布里恩·马龙

1
是啊,这实际上看起来不是改变默认设置一个更好的主意,虽然这是什么OP最初要求
罗杰

2
@LisaCerilli我有同样的,固定的,通过改变jQuery.format("...jQuery.validator.format("...
莱厄尔

1
我知道这很旧,但第一个链接已断开。
akousmata

87

这为我工作:

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

$ .validator.messages.maxlength = jQuery.validator.format(“请输入不超过{0}个字符。”); 不起作用。我建议改用Nick Cravers解决方案。
维达尔·韦斯特尼斯

1
@VidarVestnes该解决方案也适用于您的方案。您只需指定格式字符串,然后插件即可完成其余工作:$.validator.messages.maxlength = "Please enter no more than {0} characters.";
rusmus

48

这为我工作:

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

请注意,即使此答案是针对jqueryValidation而不是jqueryFileUpload的,messages$().fileupload函数中也包含选项。
Xavier Portebois 2014年

39

由于我们已经在使用JQuery,所以我们可以让页面设计者将自定义消息添加到标记而不是代码中:

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

或者,在所有字段上使用单个short 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')
    }
    // ...
});

这是一个很棒的策略,尤其是如果您需要不在js文件中设置动态消息集的时候……
Charles Harmon 2015年

@ user1207577,是的,我们可以设置自定义消息,但是如何显示最小长度和最大长度消息。我的意思是,如果我们设置自定义,则不会显示最小和最大消息。
Naren Verma

22

另一个可能的解决方案是遍历字段,将相同的错误消息添加到每个字段。

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

1
该解决方案正是我所要的……在我的方案中,每个表单字段都有一个标签,因此我找到了它对应的标签,并将其放在消息的前面,因此最后显示“ First Name is required”。非常好,甘斯克
tjans 2013年

1
+1虽然所有其他答案都有效,但这是我一直在寻找的语法。
scott.korin 2013年

6

无需更改插件源代码,您可以以下载本地化文件夹中的格式包括一个其他js文件,并在加载validation.js之后添加该文件。

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

不是。从技术上讲,它与您的答案相同。我在评论的旧版本中发表了评论。然后写了我自己的答案。所有这些都无需连续重新加载页面。因此,我只在查看您的评论时才看到您编辑的答案
抖动2010年

5

@Josh:您可以使用资源包中的翻译后的消息扩展您的解决方案

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

如果将此代码部分放入_Layout.cshtml(MVC),则可用于所有视图


4

我从来没有想过这会那么容易,我当时正在从事处理此类验证的项目。

下面的答案对于想要不费力气地更改验证消息的人将大有帮助。

以下方法使用“占位符名称”代替“此字段”。

您可以轻松修改内容

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

感谢您分享这个。天才!使用“ errorClass”和“ errorElement”!现在,我可以应用从验证创建的错误消息的样式和位置!
justdan23

3

最新版本可以执行一些不错的内联操作。

如果这是一个简单的输入字段,则可以添加以下属性data-validation-error-msg-

data-validation-error-msg="Invalid Regex"

如果您需要一些更重的东西,则可以使用带有所有值的变量完全自定义内容,这些变量将传递给validate函数。请参考此链接以获取全部详细信息-https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable


1
这是与OP询问的jQuery Validation插件不同的插件。不过,这不是一个不错的选择,特别是如果在HTML中放置与验证相关的数据(规则,消息)吸引您时(jQuery验证插件采取相反的方式,全部使用Javascript)。要提到记录的另一种选择,Parsley.js是另一个使用广泛且功能齐全的验证插件,它依赖HTML属性。
Endre双方2015年

2

要删除所有默认错误消息,请使用

$.validator.messages.required = "";

1
如何在特定领域做到这一点?
151291

1

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="john@doe.com"><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>


-2

除了这些自定义错误消息,我们还可以指定文本字段的类型。

例如:将字段类型设置为type ='email'

然后插件将识别该字段并正确验证。


他不要求正确验证它,而是要求重写消息...。“我只想重写错误消息,以使其对我的应用程序更加个性化”
Benoit
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.