jQuery Validate array input element which is created dynamically

Regarding your code for creating the new fields:

// Mode 1
$("#addInput").on('click', function () {
    $('#inputs').append($('<input class="comment" name="name[]" />'));
});

The entire reason your "Mode 1" was not working is because you've assigned the same exact name attribute, name="name[]", to every single new input. The jQuery Validate plugin absolutely requires that every input element have a unique name attribute. Just use your numberIncr variable within name[] to ensure this unique name.

Also, you really should not be adding rules upon submit. The submit event is normally where all the rules are checked, so adding rules at this point does not make a lot of sense. The new rules should be added when the new input fields are created.

For your simple case, the rules('add') method is overkill for this anyway and you can totally eliminate your .on('submit') handler. Since the rule is required, you can simply add a class="required" to your new input elements.

Here is working code:

jQuery:

$(document).ready(function () {

    // MODE 1
    var numberIncr = 1;
    $("#addInput").on('click', function () {
        $('#inputs').append($('<input class="comment required" name="name[' + numberIncr + ']" />'));
        numberIncr++;
    });

    $('form.commentForm').validate();
});

DEMO: http://jsfiddle.net/ThE5K/6/