有一个简单的方法来改变默认的错误值在jQuery验证插件?

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


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

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

而不是改变插件源代码,你可以包括一个额外的js文件,格式类似于下载本地化文件夹中的那些,并在加载validation.js后包括那个文件

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

您可以在验证调用中指定自己的消息。从验证插件文档(http://jquery.bassistance.de/validate/demo/milk/)中使用的Remember the 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")
        }
    }
});

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


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

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

这招对我很管用:

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

删除所有默认错误消息

$.validator.messages.required = "";

最新版本有一些不错的内联功能。

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

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

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


我们可以指定文本字段的类型来代替这些自定义错误消息。

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

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


这招对我很管用:

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

@Josh:你可以从你的资源包中翻译消息来扩展你的解决方案

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

如果你把这段代码放到你的_Layout中。cshtml (MVC),它可用于所有视图


因为我们已经使用了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')
    }
    // ...
});

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

下面的答案将对那些想要轻松更改验证消息的人有很大帮助。

下面的方法使用“占位符名称”来代替“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  
       });  
   });  

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>


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

});

});

添加自定义或字段标签或任何与正在验证的字段相关的动态标签。 你可以通过dom选择任何东西,并将其添加到任何带有错误消息的地方。

下面是一个在required消息开头添加字段标签而不是“this field”的例子。

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

        },

});