jQuery Validate not evaluating all fields

Question

I am working on a new layout for a page which is a wizard based ordering system for a client. They order sets of materials but these materials can be grouped together during the order process such that they can order 10 widgets in any combination of red, blue, and/or, green for example. The sum total of the fields can't exceed the pre-calculated maximum. Most of the materials are a simple single choice per group.

I've used jQuery validate in other pages and I have used the addClassRules method to validate all input elements on the page and it's worked just fine. The current example I am working on is baffling me because it only catches the first validation failure upon form submission but after submission it will usually catch others, but never the full list of validation failures.

Here's my jsfiddle sample so you can see what I am putting together: http://jsfiddle.net/brianmat/2nV5u/

I use an error counting snippet that has worked on several sites without a problem. In this example I only get 1 error even if all 7 text boxes have been left blank.

My only main difference here is I am doing a rowspan to group my items, but I can't see where that would be a problem. I know this will end up being something pretty straightforward, but I'm just hitting a wall on it at this point.

The jQuery validate code is nothing fancy:

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

The remaining code simply handles the subtotaling and numeric only data input.

I'm completely open to a different approach to handling this problem, so scrapping my current code and finding something that does work properly isn't a problem. I'd rather not try to fit a square peg into a round hole if that is what I am ultimately doing.

Answer 1

Don't forget that pesky name attribute:

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

Updated example: http://jsfiddle.net/2nV5u/6/

Also, consider using data-* attributes instead of adding your own attributes to elements (i.e. data-materialgroup instead of materialgroup).