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


363

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

Respuestas:


732

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

31
Funcionó muy bien. Acabo de agregar: $ .extend ($. Validator.messages, {requerido: "Obligatorio"});
Ravi Ram

66
Utilicé esto como una solución rápida para un formulario en varios idiomas: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey

55
@NickCraver, solo quería decir que nunca esperé generar tantos votos a favor con esta pregunta ... ¡y bien hecho por una respuesta rápida y oportuna!
Kevin Brown

3
No funciona lo siento. No se muestra ningún mensaje, solo se muestra el mensaje requerido aunque utilicé minlength.
Pratik

2
¿Podemos incluir el nombre del elemento de formulario en el mensaje de error? En lugar de solo un mensaje general. es decir , se requiere un campo de inicio de sesión en lugar de Este campo es obligatorio
Musaddiq Khan

239

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


77
Gracias por el aporte, pero si lees la pregunta más de cerca, te pregunto cómo cambiar los valores predeterminados. Sé que puedo especificar mensajes únicos.
Kevin Brown

41
Solo contribuir: esto fue útil para mí, incluso si no estaba en el objetivo de la pregunta.
Brien Malone

1
Sí, esto en realidad parece una mejor idea que cambiar los valores predeterminados, aunque eso es lo que originalmente solicitó el OP
Roger

2
@LisaCerilli Tenía lo mismo, lo arreglé cambiando jQuery.format("...ajQuery.validator.format("...
lehel

1
Sé que esto es viejo, pero el primer enlace está roto.
akousmata

87

Esto funcionó para mí:

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

$ .validator.messages.maxlength = jQuery.validator.format ("Ingrese no más de {0} caracteres"); No funciona. Sugiero usar la solución Nick Cravers en su lugar.
Vidar Vestnes

1
@VidarVestnes La solución también funciona para su escenario. Sólo tiene que especificar la cadena de formato, y el plugin se encarga del resto:$.validator.messages.maxlength = "Please enter no more than {0} characters.";
rusmus

48

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

Tenga en cuenta que incluso si esta respuesta es para jqueryValidation y no jqueryFileUpload, también hay messagesopciones en la $().fileuploadfunción.
Xavier Portebois

39

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

Esta es una gran estrategia, especialmente si necesita un conjunto de mensajes dinámicos que no esté en sus archivos js ...
Charles Harmon

@ user1207577, Sí, podemos configurar los mensajes personalizados, pero ¿cómo podemos mostrar el mensaje de longitud mínima y longitud máxima? Quiero decir, si configuramos el mensaje personalizado, no se mostrarán los mensajes mínimo y máximo. ¿Alguna idea?
Naren Verma

22

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

1
Esta solución era exactamente lo que estaba buscando ... en mi escenario, cada campo de formulario tiene una etiqueta, así que encuentro su etiqueta correspondiente y la antepongo al mensaje para que al final diga "Se requiere el nombre". Muy bien, Ganske.
tjans

1
+1 Si bien todas las otras respuestas son válidas, esta es la sintaxis que estaba buscando.
scott.korin

6

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

No lo es Técnicamente es lo mismo que tu respuesta. Publiqué mi comentario en la versión anterior de su respuesta. Luego escribió mi propia respuesta. Todo sin recargar continuamente la página. Por lo tanto, solo vi una respuesta editada al revisar su comentario
jitter

5

@ 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


4

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

Gracias por compartir esto. ¡El uso de "errorClass" y "errorElement" es genial! ¡Ahora puedo aplicar el estilo y la ubicación de mis mensajes de error creados a partir de la validación!
justdan23

3

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


1
Este es un complemento diferente al complemento de validación jQuery sobre el que el OP preguntó. Sin embargo, no es una mala elección, especialmente si se le colocan datos relacionados con la validación (reglas, mensajes) en el HTML (el jQuery Validation Plugin toma el camino opuesto, usando Javascript para todo eso). Para mencionar otra alternativa para el registro, Parsley.js es otro complemento de validación muy utilizado y con todas las funciones que se basa en atributos HTML.
Endre Both

2

Para eliminar todos los mensajes de error predeterminados, use

$.validator.messages.required = "";

1
¿Cómo hacer esto para un campo en particular?
151291

1

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

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.


no pide validarlo correctamente, pide reescribir los mensajes ... "Solo quiero reescribir los mensajes de error para que sean más personales para mi aplicación"
Benoit
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.