Cómo agregar mensajes a una clase con addClassRules

Question

Estoy usando jQuery Validate para validar una página con una gran cantidad de filas de datos repetidos. Debido al espacio limitado, cada fila tiene su propio resumen de validación.

utilizo addClassRules de aplicar las reglas de validación a la página, pero los mensajes de error por defecto son demasiado genérico en el resumen (por ejemplo, "El campo es obligatorio, se requiere Campo etc)

Ejemplo:.

jQuery.validator.addClassRules({ 
amount: { 
    required: true, 
    range: [0, 2000000] 
}, 
comment: { 
    maxlength: 51 
}, 
owner: { 
    notFirstOption: true 
}, 
A: { 
    required: function (element) { 
     return getParentElement($(element), "tr").find(".colB input.B").val().length > 0; 
    }, 
    digits: true 
}}); 

puede aplicar mensajes personalizados para las reglas en cada clase de validación lo ideal es que estoy buscando algo como:?

jQuery.validator.addClassMessages({ 
    amount: { 
     required: "Amount is required", 
     range: "Amount must be between 0 and 2,000,000" 
    }, 
    comment: { 
     maxlength: "Comment may be a maximum of 51 characters" 
    }, 
    owner: { 
     notFirstOption: "Please select an owner" 
    }, 
    A: { 
     required: "A is required if B is entered", 
     digits: "A must be numeric" 
    }}); 

Gracias de antemano por cualquier ayuda que ca n oferta!

Answer 1

En la documentación, la respuesta es aliar el método al que desea llamar y agregar el mensaje personalizado.

Check the reference bajo el título "reglas Refactoring":

// alias required to cRequired with new message 
$.validator.addMethod("cRequired", $.validator.methods.required, 
"Customer name required"); 
// alias minlength, too 
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
// leverage parameter replacement for minlength, {0} gets replaced with 2 
$.format("Customer name must have at least {0} characters")); 
// combine them both, including the parameter for minlength 
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 }); 

Answer 2

Yo he llegado con una solución bastante atroz, pero espero por algo mucho más limpio con un poco más de tiempo ...

De todos modos, mediante la asignación de los mensajes a través de jQuery metadatos que soy capaz de personalizarlos por clase.

class="amount {validate: 
       {messages: 
        {required:'Amount is required', 
        range: 'Amount must be between 0 and 2,000,000', 
        digits: 'Amount must be numeric'} 
       } 
       }" 

... y así sucesivamente para cada uno de los campos en las filas de mi cuadrícula.

Voy a estar buscando ampliar el método 'addClassRules' para aceptar un parámetro de mensajes, pero por ahora esto funciona, así que funcionará.

Answer 3

Dado que obviamente todos están interesados ​​en la respuesta a este, ¡aquí está el siguiente paso en mi búsqueda de una respuesta!

He agregado métodos al complemento que permiten agregar mensajes de clase y modifiqué el controlador de mensajes predeterminado para seleccionarlos.

añadido antes

customClassMessage: function (element, method) { 
    //Get the elements class(es) 
    var classes = $(element).attr("class").split(" "); 

    //return any message associated with said class and method 
    var m = $.validator.messages[classes[0]]; 

    return m && (m.constructor == String 
     ? m 
     : m[method]); 
}, 

modificado 'defaultMessage' para incluir una llamada al método anterior

defaultMessage: function (element, method) { 
       return this.findDefined(
       this.customMessage(element.name, method), 
       this.customMetaMessage(element, method), 
       this.customClassMessage(element, method), 
       // title is never undefined, so handle empty string as undefined 
       !this.settings.ignoreTitle && element.title || undefined, 
       $.validator.messages[method], 
       "<strong>Warning: No message defined for " + element.name + "</strong>" 
      ); 
      }, 

Agregado método de una 'addClassMessages'

 addClassMessages: function (className, messages) { 
     if (className.constructor == String) { 
      $.validator.messages[className] = messages != undefined ? messages : $.validator.messages[className]; 
     } 
     else { 
      $.extend(this.messages, className); 
     } 
    }, 

No he customMetaMessage ' Todavía no he podido averiguar cómo adjuntar estos métodos adicionales fuera del complemento. Sin embargo, al menos no tengo que declarar mensajes de error en el atributo 'clase'.

jQuery.validator.addClassMessages({ 
    amount: { 
     required: "Amount is required", 
     range: "Amount must be between 0 and 2,000,000", 
     digits: "Amount must be numeric" 
    } 
}); 

Answer 4

Prueba esto:

jQuery.validator.addClassRules({ 
    amount: { 
     required: true, 
     range: [0, 2000000], 
     messages: {required: "Required field!", range: "Invalid range!"} 
    }, 
    comment: { 
     maxlength: 51, 
     messages: {maxlength: "Max 51 characters!"} 
    } 
}) 

creo que es lo que está buscando, ¿verdad?

Answer 5

Esto se puede hacer mediante el siguiente código,

$.validator.messages.accept = 'File must be JPG, GIF or PNG'; 

    $.validator.addClassRules("files", {    
     accept : "png|jpe?g|gif", 
     filesize : 2000000 
    }); 

Answer 6

Uso datos-msg-required = "Mensaje de error aquí" con el elemento que le gusta hacer la validación

<select name="account1" data-msg-required="Please select an account"> 
<option value="">--Select Account--</option> 
<optgroup label="100-Assets"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
    <option value="4">D</option> 
</optgroup>