jQuery Validate no evaluando todos los campos

Question

Estoy trabajando en un nuevo diseño para una página que es un sistema de pedido basado en asistente para un cliente. Piden conjuntos de materiales, pero estos materiales se pueden agrupar durante el proceso de pedido de modo que puedan pedir 10 artilugios en cualquier combinación de rojo, azul y/o verde, por ejemplo. La suma total de los campos no puede exceder el máximo precalculado. La mayoría de los materiales son una simple opción simple por grupo.

He usado jQuery validar en otras páginas y he utilizado el método addClassRules para validar todos los elementos de entrada en la página y funcionó bien. El ejemplo actual en el que estoy trabajando me desconcierta porque solo detecta el primer error de validación al enviar el formulario, pero después del envío, por lo general, detectará otros, pero nunca la lista completa de fallas de validación.

Aquí es mi muestra jsFiddle para que pueda ver lo que estoy armando: http://jsfiddle.net/brianmat/2nV5u/

Puedo utilizar un fragmento de conteo de error que se ha trabajado en varios sitios sin ningún problema. En este ejemplo, solo recibo 1 error incluso si los 7 cuadros de texto se han dejado en blanco.

Mi única diferencia principal aquí es que estoy haciendo una hilera de filas para agrupar mis artículos, pero no puedo ver dónde podría ser un problema. Sé que esto terminará siendo algo bastante directo, pero estoy golpeando una pared en este punto.

El jQuery validar el código es muy sofisticado:

$.validator.addClassRules({ 
    NumericInput: { 
     required: true 
    } 
}); 

$("#theForm").validate({ 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    errorPlacement: function(error, element) {}, 
    submitHandler: function(form) { 
     $("div.error").hide(); 
     form.submit(); 
    } 
}); 

El código restante simplemente se encarga de la subtotales y sólo de entrada de datos numéricos.

Estoy completamente abierto a un enfoque diferente para manejar este problema, por lo que descartar mi código actual y encontrar algo que funcione correctamente no es un problema. Prefiero no intentar encajar una clavija cuadrada en un agujero redondo si eso es lo que finalmente estoy haciendo.

Answer 1

No hay que olvidar que molesta name atributo:

<input id="Text1" name="Text1" type="text" class="NumericInput group1" materialgroup="1" /> 
<!--    ^^ --> 

ejemplo Actualizado:http://jsfiddle.net/2nV5u/6/

También, considere el uso de data-* atributos en lugar de añadir sus propios atributos a los elementos (es decir, en lugar de data-materialgroupmaterialgroup)