español - jquery validate required

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

Question

¿Existe una forma sencilla de cambiar los valores de error predeterminados en el complemento de validación de jQuery ?

Solo quiero volver a escribir 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 hacerlo!

Answer 1

@Josh: Puedes expandir tu solución con el Mensaje traducido de tu paquete de recursos

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

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

Answer 2

Agregue este código en un archivo / script separado incluido después del complemento de validación para anular los mensajes, edítelos 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}.")
});

Answer 3

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 usa un solo atributo de datos cortos de 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'')
    }
    // ...
});

Answer 4

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

Answer 5

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

Ej .: establecer el tipo de campo en tipo = ''correo electrónico''

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

Answer 6

Esto funcionó para mí:

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

Answer 7

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

Answer 8

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

Si es un campo de entrada simple, puede agregar el atributo data-validation-error-msg así:

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

Si necesita algo un poco más pesado, puede personalizar completamente las cosas utilizando 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

Answer 9

Nunca pensé que esto sería tan fácil, estaba trabajando en un proyecto para manejar dicha 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 del 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  
       });  
   });  

Answer 10

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

Answer 11

Para eliminar todos los mensajes de error predeterminados use

$.validator.messages.required = "";

Answer 12

Puede especificar sus propios mensajes en la llamada de validación. Al levantar y abreviar este código del formulario de registro de 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