jQuery validation: change default error message

问题:

Is there a simple way to change the default error values in the jQuery validation plugin?

I just want to rewrite the error messages to be more personal to my app--I have a lot of fields, so I don\'t want to set the message individually for field x...I know I can do that!

回答1:

Add this code in a separate file/script included after the validation plugin to override the messages, edit at will :)

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

回答2:

You can specify your own messages in the validate call. Lifting and abbreviating this code from the Remember the Milk signup form used in the Validation plugin documentation (http://jquery.bassistance.de/validate/demo/milk/), you can easily specify your own messages:

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\")
        }
    }
}

The complete API for validate(...) : http://jqueryvalidation.org/validate

回答3:

This worked for me:

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

回答4:

This worked for me:

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

回答5:

Since we\'re already using JQuery, we can let page designers add custom messages to the markup rather than the code:

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

Or, a more general solution using a single short data-msg attribute on all fields:

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

And the code then contains something like this:

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

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

回答6:

Another possible solution is to loop over the fields, adding the same error message to each field.

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

回答7:

Instead of changing the plugin source code you can include an additional js file in the format like those in the downloads localization folder and include that one after loading the validation.js

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

回答8:

@Josh: You can expand your solution with translated Message from your resource bundle

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

If you put this code part into your _Layout.cshtml (MVC) it\'s available for all your views

回答9:

The newest version has some nice in-line stuff you can do.

If it\'s a simple input field you can add the attribute data-validation-error-msg like this --

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

If you need something a little heavier you can fully customize things using a variable with all the values which is passed into the validate function. Reference this link for full details -- https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

回答10:

I never thought this would be so easy , I was working on a project to handle such validation.

The below answer will of great help to one who want to change validation message without much effort.

The below approaches uses the \"Placeholder name\" in place of \"This Field\".

You can easily modify things

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

回答11:

To remove all default error messages use

$.validator.messages.required = \"\";

回答12:

instead of these custom error messages we can specify the type of the text field.

Ex: set type of the field in to type = \'email\'

then plugin will identify the field and validate correctly.