jQuery Validation plugin: checkbox groups and error messages issues

Question

He creado un formulario utilizando el complemento jQuery Validation, y todas las entradas son correctas con validación de trabajo y mensajes de error, excepto las casillas de verificación. Tengo dos problemas con la casilla de verificación.

La primera es que la API del complemento Validation no parece manejar casillas de verificación en contextos agrupados (estoy usando conjuntos de campos para agrupar). Aquí se encuentran varios enfoques sobre el tema, incluida la referencia a a post de Rebecca Murphey para un caso más general utilizando un método y una clase personalizados. La adaptación que a esta situación:

jQuery.validator.addMethod('required_group', function(val, el) { 
     var fieldParent = $(el).closest('fieldset'); 
     return fieldParent.find('.required_group:checked').length; 
}); 

jQuery.validator.addClassRules('required_group', { 
     'required_group': true 
}); 

jQuery.validator.messages.required_group = 'Please check at least one box.'; 

Este tipo de obras, pero produce mensajes de error en cada casilla, y sólo los elimina como se hace clic en cada caja. Esta no es una situación aceptable para el usuario, que solo puede deshacerse de ellos haciendo clic en falsos positivos. Idealmente, supongo que lo que se necesita es algo para evitar o eliminar mensajes adicionales antes de que se muestren y usar errorPlacement para mostrar un solo mensaje de error en el fieldset padre, que luego se eliminaría con un clic en cualquier casilla de verificación. Menos idealmente, tal vez todos se mostrarían, pero un controlador de eventos podría desactivar el conjunto completo de mensajes redundantes con un clic, que es lo que aparentemente hace this approach ofrecido por tvanfosson. (Otro enfoque personalizado here, pero no pude hacerlo funcionar). Creo que también debería tener en cuenta que este formulario requiere que las casillas de verificación tengan diferentes nombres.

Mi segundo problema es que uno de los conjuntos de campos con casillas de verificación en el formulario también contiene anidado fieldset de casillas de verificación en una de las casillas de verificación externas. Por lo tanto, además del requisito de primer nivel de verificación de una casilla, si la casilla de verificación particular que contiene las casillas de verificación de segundo nivel está marcada, debe verificarse al menos una de las casillas de segundo nivel. No estoy seguro sobre el enfoque correcto; Supongo que lo que debe suceder (siguiendo el esquema anterior) es que la casilla de verificación del desencadenador usaría toggleClass para agregar/eliminar la clase 'grupo_necesario' a todas las casillas de verificación en el subcampo, que luego (con suerte) se comportaría igual que el padre campo:

$("#triggerCheckbox").click(function() { 
    $(this).find(":checkbox").toggleClass("required_group"); 
}); 

Cualquier sugerencia o idea bienvenida. Estoy bastante más allá de mis habilidades jQuery limitadas en este caso y me alegraría saber que me olvidé de formas simples, elegantes y/o obvias de hacer esto.

Answer 1

He tratado un problema similar anteriormente, aunque en mi caso específico creo que lo tuve más fácil que tú - Tenía los grupos de casillas de verificación, pero nada más en el formulario necesitaba validación.

Aquí es la idea general, que puede resolver su problema de "un error por cada casilla de verificación":

//for each fieldset, attach a new rule to the first checkbox 
$('fieldset input[type="checkbox"]:first').each(function(i,v){ 
    $(v).rules('add', { 
     required: "fieldset input[type="checkbox"]:unchecked" 
    }); 
}); 

Con el fin de hacer algo cuerdo con los errores de validación, implementar su propia función showErrors. Aquí es donde la simplicidad de mi caso probablemente no te ayude mucho. No tenía que preocuparme si los errores estaban en un grupo de casillas de verificación o no, en mi forma si hubiera errores, sería lo mismo problema: al menos una casilla de verificación no se verificó por conjunto de campo. Para ti, creo que tendrías que profundizar en la función defaultShowErrors del complemento Validate (en la fuente) para ver qué hacer con el errorMap y la Lista de errores.

$('#myForm').validate({ 
    ... 
    showErrors: function(map,list){ 
     if (this.numberofInvalids()){ 
      $('#form_errors').html('You much choose at least one Checkbox per group'); 
     } else { 
      this.defaultShowErrors(); 
     } 
    } 
}); 

Para la segunda parte de su pregunta, me imagino que una regla de 'depende' es lo que está buscando. Así que no hay necesidad de agregar clases, simplemente tenga una regla para que el subgrupo dependa de la casilla de verificación principal que esté siendo verificada (vea el ejemplo casi perfecto en el documento de reglas).