Jquery validate: ¿Cómo validar que todos o ninguno de un grupo de cuadros de texto tienen valores?

Tengo un formulario que consta de un par de docenas de tags y cuadros de texto. Pero, por simplicidad, digamos que solo tengo seis de esos artículos:

A-text
B-text
C-text
D-text
E-text
F-text

Y las reglas son las siguientes:

Si A tiene un valor, entonces B también debe tener un valor. Y viceversa. Si C, D, E o F tienen un valor, entonces cada entrada debe tener un valor.

Un valor aquí significa “tiene texto de longitud> 0”. Pero, en realidad, también verifico cierta validez (es un número, es una dirección válida de correo electrónico, etc.)

He intentado validar el primer conjunto de reglas, las pertenecientes a A y B, pero esto no funciona:

 $("#myform").validate({ rules: { A: { depends: function(element) { ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0); } } } }); 

Mi opinión es que la statement anterior “depende” debe asegurarse de que la página solo valide si la función llamada devuelve True. Pero puedo enviar el formulario incluso si una de las áreas de texto tiene texto y la otra no.

¿Por qué es esto y qué debo hacer en su lugar?

Tu codigo…

 rules: { A: { depends: function(element) { .... } } } 

No existe tal cosa como una regla de depends .

depends es una propiedad que se encuentra bajo una regla existente para “aplicar la regla solo en ciertas condiciones” .

 rules: { A: { required: { depends: function(element) { // return true or false here } } } } 

Siempre que la función de los datos se vuelva true , se activará la regla required asociada.

Dicho esto, la función / lógica es defectuosa …

 depends: function(element) { ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0); } 
  • Necesitas una statement de return .
  • No puede usar ($("#input-A").val().length > 0) como parte de la función de dependientes required para la entrada A porque siempre se evaluará como false . Siempre comienza vacío, ¿verdad? (Además, no tiene sentido cambiar la regla del campo en función del contenido del mismo campo … probablemente nunca puedas cumplir esta regla).

Prueba algo como esto …

 rules: { A: { required: { depends: function(element) { return $("#input-B").is(':filled'); } } }, B: { required: { depends: function(element) { return $("#input-A").is(':filled'); } } } } 

depends devolverá true si B se completa y activará la regla required en A La misma lógica se aplica al campo B

DEMO de trabajo: http://jsfiddle.net/t9y2x3jf/

NOTA : debe eliminar los atributos required HTML5 en línea de sus elementos de input , de lo contrario, estos anularán su lógica de depends .