jquery - errorelement - Cómo agregar mensajes a una clase con addClassRules

jquery validate rules

Question

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

Utilizo addClassRules para aplicar las reglas de validación a la página, pero los mensajes de error predeterminados son demasiado genéricos en el resumen (por ejemplo, "El campo es obligatorio, el campo es obligatorio, 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? Idealmente busco 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 pueda ofrecer!

Answer 1

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

Verifique la referencia bajo el encabezado "Reglas de refactorización":

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

Esto se puede hacer usando 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 3

He encontrado una solución bastante atroz pero espero algo mucho más limpio con un poco más de tiempo ...

De todos modos, al asignar los mensajes a través de los metadatos de jQuery, puedo 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 mis filas de la cuadrícula.

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

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 eso es lo que estás buscando, ¿correcto?

Answer 5

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

Answer 6

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

He agregado métodos en el complemento que permiten la adición de mensajes de clase y modifiqué el manejador de mensajes predeterminado para seleccionarlos.

Añadido antes de ''customMetaMessage''

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

Se modificó el ''mensaje predeterminado'' 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>"
            );
            },

Se agregó un método ''addClassMessages''

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

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