jquery - jQuery Validate がすべてのフィールドを評価しない

Question

クライアント向けのウィザード ベースの注文システムであるページの新しいレイアウトに取り組んでいます。彼らは材料のセットを注文しますが、これらの材料は注文プロセス中にグループ化して、たとえば赤、青、および/または緑の任意の組み合わせで 10 個のウィジェットを注文できるようにすることができます。フィールドの合計は、事前に計算された最大値を超えることはできません。材料のほとんどは、グループごとに 1 つの単純な選択です。

他のページで jQuery 検証を使用し、addClassRules メソッドを使用してページ上のすべての入力要素を検証しましたが、問題なく動作しました。私が取り組んでいる現在の例は、フォームの送信時に最初の検証の失敗のみをキャッチしますが、送信後は通常、他の検証の失敗をキャッチしますが、検証の失敗の完全なリストは決してキャッチしないため、私を困惑させています。

ここに私のjsfiddleサンプルがありますので、私がまとめているものを見ることができます: http://jsfiddle.net/brianmat/2nV5u/

いくつかのサイトで問題なく動作するエラー カウント スニペットを使用しています。この例では、7 つのテキスト ボックスがすべて空白のままになっていても、1 つのエラーしか表示されません。

ここでの唯一の主な違いは、アイテムをグループ化するために行スパンを実行していることですが、それがどこで問題になるかわかりません。これは非常に簡単なことになることはわかっていますが、現時点では壁にぶつかっています。

jQuery の検証コードは派手なものではありません。

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

残りのコードは、小計と数値のみのデータ入力を処理するだけです。

私はこの問題を処理するための別のアプローチに対して完全にオープンであるため、現在のコードを廃棄して適切に機能するものを見つけることは問題ではありません。四角いペグを丸い穴にはめようとするのは、それが最終的に私がやっていることであるなら、私はむしろ試みたくありません.