jQuery Validiere nicht alle Felder auswerten

Question

Ich arbeite an einem neuen Layout für eine Seite, die ein Assistent Bestellsystem für einen Client ist. Sie bestellen Sätze von Materialien, aber diese Materialien können während des Bestellprozesses so gruppiert werden, dass sie 10 Widgets in einer beliebigen Kombination von Rot, Blau und/oder Grün bestellen können. Die Summe der Felder darf das vorberechnete Maximum nicht überschreiten. Die meisten Materialien sind eine einfache Auswahl pro Gruppe.

Ich habe jQuery validate in anderen Seiten verwendet und ich habe die addClassRules-Methode verwendet, um alle Eingabeelemente auf der Seite zu überprüfen, und es hat gut funktioniert. Das aktuelle Beispiel, an dem ich arbeite, verblüfft mich, weil es nur den ersten Validierungsfehler bei der Formularübermittlung abfängt, aber nach der Einreichung wird es normalerweise andere abfangen, aber niemals die vollständige Liste der Validierungsfehler.

Hier ist meine jsfiddle Probe, so dass Sie sehen können, was ich zusammen bin setzen: http://jsfiddle.net/brianmat/2nV5u/

Ich verwende eine Fehlerzählung Schnipsel, die an mehreren Standorten ohne Probleme gearbeitet hat. In diesem Beispiel erhalte ich nur 1 Fehler, selbst wenn alle 7 Textfelder leer gelassen wurden.

Mein einziger Hauptunterschied hier ist, dass ich eine rowspan mache, um meine Artikel zu gruppieren, aber ich kann nicht sehen, wo das ein Problem wäre. Ich weiß, dass das am Ende etwas ziemlich Einfaches sein wird, aber ich stoße gerade an dieser Stelle auf eine Wand.

Die jQuery-Code validieren ist nichts Besonderes:

$.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(); 
    } 
}); 

Der verbleibende Code einfach übernimmt die Zwischensummen und numerisch nur die Dateneingabe.

Ich bin völlig offen für eine andere Herangehensweise an dieses Problem zu behandeln, also meinen aktuellen Code zu verwerfen und etwas zu finden, das richtig funktioniert, ist kein Problem. Ich würde lieber nicht versuchen, einen quadratischen Pflock in ein rundes Loch zu stecken, wenn es das ist, was ich letztendlich tue.

Answer 1

Vergessen Sie nicht, dass nervtötende name Attribut:

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

Aktualisiert Beispiel:http://jsfiddle.net/2nV5u/6/

Bedenken Sie auch mit data-* Attribute anstelle der eigenen Attribute Elemente hinzuzufügen (dh data-materialgroup statt materialgroup).