Validación de jQuery: cambiar el mensaje de error predeterminado

¿Hay una manera simple de cambiar los valores de error predeterminados en el complemento de validación jQuery ?

Solo quiero reescribir los mensajes de error para que sean más personales para mi aplicación. Tengo muchos campos, así que no quiero configurar el mensaje individualmente para el campo x ... ¡Sé que puedo hacer eso!

Agregue este código en un archivo / secuencia de comandos separado incluido después del complemento de validación para anular los mensajes, edite a voluntad :)

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

Puede especificar sus propios mensajes en la llamada de validación. Levantando y abreviando este código del formulario de registro Remember the Milk utilizado en la documentación del complemento de Validación ( http://jquery.bassistance.de/validate/demo/milk/ ), puede especificar fácilmente sus propios mensajes:

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

La API completa para validar (...): http://jqueryvalidation.org/validate

Esto funcionó para mí:

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

Esto funcionó para mí:

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

Como ya estamos usando JQuery, podemos permitir que los diseñadores de páginas agreguen mensajes personalizados al marcado en lugar del código:

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

O, una solución más general que utiliza un único atributo corto de datos-mensaje en todos los campos:

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

Y el código contiene algo como esto:

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

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

Otra posible solución es recorrer los campos, agregando el mismo mensaje de error a cada campo.

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

En lugar de cambiar el código fuente del complemento, puede incluir un archivo js adicional en el formato como los de la carpeta de localización de descargas e incluirlo después de cargar validation.js

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

@ Josh: puede ampliar su solución con el mensaje traducido de su paquete de recursos

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

Si coloca este código en su _Layout.cshtml (MVC), está disponible para todas sus vistas

Nunca pensé que esto sería tan fácil, estaba trabajando en un proyecto para manejar tal validación.

La siguiente respuesta será de gran ayuda para quien quiera cambiar el mensaje de validación sin mucho esfuerzo.

Los siguientes enfoques utilizan el "Nombre de marcador de posición" en lugar de "Este campo".

Puedes modificar cosas fácilmente

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

La versión más nueva tiene algunas buenas cosas en línea que puedes hacer.

Si es un campo de entrada simple, puede agregar el atributo de data-validation-error-msgesta manera:

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

Si necesita algo un poco más pesado, puede personalizar completamente las cosas usando una variable con todos los valores que se pasan a la función de validación. Consulte este enlace para obtener todos los detalles: https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Para eliminar todos los mensajes de error predeterminados, use

$.validator.messages.required = "";

Mensaje de error personalizado de validación de formulario jQuery -tutsmake

Manifestación

$(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="[email protected]"><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>

En lugar de estos mensajes de error personalizados, podemos especificar el tipo de campo de texto.

Ej: establecer el tipo del campo en type = 'email'

entonces el complemento identificará el campo y lo validará correctamente.