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

Posted 2023-05-07

技术标签:

【中文标题】jQuery 验证：更改默认错误消息【英文标题】：jQuery validation: change default error message 【发布时间】：2021-12-30 05:09:35 【问题描述】：

有没有一种简单的方法可以更改jQuery validation plugin 中的默认错误值？

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

【问题讨论】：

【参考方案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.")
);

【讨论】：

效果很好。我刚刚添加了：$.extend($.validator.messages, required: "Required" ); 我用它作为多语言表单的快速修复： if($('body').attr('lang')=="es") jQuery.extend... ; @NickCraver，我只是想说，我从没想过这个问题会引起这么多的赞成票......而且做得很好，及时快速地回答！不工作对不起。没有显示任何消息，尽管我使用了 minlength，但只显示了必需的消息。我们能否在错误消息中包含表单元素名称。而不仅仅是一般信息。即 登录字段是必需的 而不是 此字段是必需的【参考方案2】：

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

【讨论】：

感谢您的输入，但如果您更仔细地阅读问题，我会问如何更改默认值。我知道我可以指定唯一的消息。只是投入 - 这对我很有帮助，即使不是问题的目标。是的，这实际上看起来比更改默认值更好，尽管这是 OP 最初要求的 @LisaCerilli 我有同样的问题，通过将 jQuery.format("... 更改为 jQuery.validator.format("... 来修复它我知道这是旧的，但第一个链接坏了。【参考方案3】：

这对我有用：

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

【讨论】：

$.validator.messages.maxlength = jQuery.validator.format("请输入不超过 0 个字符。");不起作用。我建议改用 Nick Cravers 解决方案。 @VidarVestnes 该解决方案也适用于您的场景。您只需指定格式字符串，其余的由插件完成：$.validator.messages.maxlength = "Please enter no more than 0 characters.";【参考方案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.",
            
        
    )

【讨论】：

请注意，即使此答案是针对 jqueryValidation 而不是 jqueryFileUpload，$().fileupload 函数中也有 messages 选项。【参考方案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')
    
    // ...
);

【讨论】：

这是一个很好的策略，特别是如果您需要一个不在 js 文件中的动态消息集... @user1207577，是的，我们可以设置自定义消息，但我们如何显示最小长度和最大长度消息。我的意思是，如果我们设置自定义，则不会显示最小和最大消息。有什么想法吗？【参考方案6】：

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

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

【讨论】：

这个解决方案正是我正在寻找的......在我的场景中，每个表单字段都有一个标签，所以我找到它对应的标签并将其添加到消息中，所以最后它说“首先姓名是必填项。”很好，甘斯克。 +1 虽然所有其他答案都有效，但这是我正在寻找的语法。【参考方案7】：

您可以在下载本地化文件夹中包含一个额外的js文件，而不是更改插件源代码，并在加载validation.js后包含该文件

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

【讨论】：

不是。从技术上讲，它与您的答案相同。我将我的评论发布到您的答案的旧版本。然后写了我自己的答案。所有这些都无需不断地重新加载页面。因此，我在查看您的评论时只看到您编辑过的答案【参考方案8】：

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

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

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

【讨论】：

【参考方案9】：

我从没想过会这么容易，我正在做一个项目来处理这样的验证。

以下答案对于想要轻松更改验证消息的人有很大帮助。

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

你可以很容易地修改东西

   // 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”的使用真是天才！我现在可以应用通过验证创建的错误消息的样式和位置！【参考方案10】：

最新版本有一些你可以做的很好的内嵌东西。

如果它是一个简单的输入字段，你可以像这样添加属性data-validation-error-msg --

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

如果你需要一些更重的东西，你可以使用一个变量来完全自定义东西，该变量包含传递给 validate 函数的所有值。参考这个链接了解完整的细节——https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

【讨论】：

这是一个与 OP 询问的 jQuery Validation Plugin 不同的插件。不过，这是一个不错的选择，特别是如果在 HTML 中放置与验证相关的数据（规则、消息）对您很有吸引力（jQuery 验证插件采取相反的方式，使用 Javascript 完成所有这些）。顺便提一下另一个替代方案，Parsley.js 是另一个使用广泛且功能齐全的验证插件，它依赖于 HTML 属性。【参考方案11】：

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

Demo

$(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>

【讨论】：

【参考方案12】：

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

$.validator.messages.required = "";

【讨论】：

如何为特定领域做到这一点？【参考方案13】：

$(function() 

$("#username_error_message").hide();
$("#password_error_message").hide();
$("#retype_password_error_message").hide();
$("#email_error_message").hide();

var error_username = false;
var error_password = false;
var error_retype_password = false;
var error_email = false;

$("#form_username").focusout(function() 

    check_username();
    
);

$("#form_password").focusout(function() 

    check_password();
    
);

$("#form_retype_password").focusout(function() 

    check_retype_password();
    
);

$("#form_email").focusout(function() 

    check_email();
    
);

function check_username() 

    var username_length = $("#form_username").val().length;
    
    if(username_length < 5 || username_length > 20) 
        $("#username_error_message").html("Should be between 5-20 characters");
        $("#username_error_message").show();
        error_username = true;
     else 
        $("#username_error_message").hide();
    



function check_password() 

    var password_length = $("#form_password").val().length;
    
    if(password_length < 8) 
        $("#password_error_message").html("At least 8 characters");
        $("#password_error_message").show();
        error_password = true;
     else 
        $("#password_error_message").hide();
    



function check_retype_password() 

    var password = $("#form_password").val();
    var retype_password = $("#form_retype_password").val();
    
    if(password !=  retype_password) 
        $("#retype_password_error_message").html("Passwords don't match");
        $("#retype_password_error_message").show();
        error_retype_password = true;
     else 
        $("#retype_password_error_message").hide();
    



function check_email() 

    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]2,4$/i);

    if(pattern.test($("#form_email").val())) 
        $("#email_error_message").hide();
     else 
        $("#email_error_message").html("Invalid email address");
        $("#email_error_message").show();
        error_email = true;
    



$("#registration_form").submit(function() 
                                        
    error_username = false;
    error_password = false;
    error_retype_password = false;
    error_email = false;
                                        
    check_username();
    check_password();
    check_retype_password();
    check_email();
    
    if(error_username == false && error_password == false && error_retype_password == false && error_email == false) 
        return true;
     else 
        return false;   
    

);

);

【讨论】：

对代码的解释可以帮助其他面临同样问题的人【参考方案14】：

添加自定义或字段标签或与正在验证的字段相关的任何动态。您可以通过 dom 选择任何内容并将其添加到任何带有错误消息的位置。

以下是在必填消息的开头添加字段标签而不是“此字段”的示例。

jQuery.extend(jQuery.validator.messages, 

    required: function(result,e)

        let field_label = "This field ";

        if($(e).closest('.form-group').find('label').length > 0)
            field_label = $(e).closest('.form-group').find('label').html();

        return field_label+" is required.";

        ,

);

【讨论】：

【参考方案15】：

我们可以指定文本字段的类型，而不是这些自定义错误消息。

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

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

【讨论】：

他不要求正确验证它，他要求重写消息....“我只是想重写错误消息以使我的应用更加个性化”

以上是关于jQuery 验证：更改默认错误消息的主要内容，如果未能解决你的问题，请参考以下文章

如何在Rails 5中更改设计中的验证错误消息

Laravel：如何更改默认登录错误消息：'这些凭据与我们的记录不匹配'

如何在 MVC 4 中更改 jQuery DatePicker 中的验证文本？

Laravel - 更改身份验证用户的错误消息

Jquery File Upload blueimp 无法更改错误消息文本

Django rest框架：如何全局更改错误响应格式