jQuery验证动态创建的数组输入元素

我有一个表单，我想用它来验证。我目前对数组名为inputname[]的输入元素有一个问题，它是用jQuery.on动态创建的。让我解释一下这个问题：

有一个表单，其中有一个名为name[]的输入文本。 有一个添加更多输入文本的按钮，该元素使用.on执行。我点击了2或3次，因此将有超过1个输入文本。 单击submit，表单将正确验证，但它仅验证第一个创建的数组元素，而不是另一个元素。 对于完整的代码，我在这里创建了一个JSFIDLE：

jQuery：

HTML:

我在它们内部创建了两种模式，一种是不带数组名的动态输入文本，另一种是不带数组名的动态输入文本

我一直在考虑这些解决方案，但不幸的是，其中没有一个有效：

---

请提供帮助。

关于创建新字段的代码：

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

演示：

---

提交表单时，您正在添加规则。这是完全错误的。您应该在创建新字段后立即添加规则。请在OP中包含足够的代码，以创建简明的演示。您的OP应该是完全独立的，不依赖于外部链接。我已经编辑了你的作品，包含了完整的代码。嗨，斯帕克，谢谢你的回答和警告。我从来不知道在[]括号内有一个名字[1]，名字[2]和数字。不过，首先我需要知道PHP如何处理这个变量，所以我会尽快尝试您的代码。。。谢谢。更新：我正在应用你在我的表格上的建议，现在一切都正确完美地工作了。我也能消除。onsubmit。谢谢@用户9437856，请不要在“其他答案”下询问您自己的问题。“没有人知道你的项目或控制器。”Sparky问这个问题是因为你把这个问题贴在我的标签上。

<form class="commentForm">
    <div id="inputs"></div>
    <input type="submit" /> 
    <span id="addInput">add element</span>
</form>

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

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

    The validation can be simply done by class name
        <form action="http://xxxx/project/create" class="form-horizontal" id="invoice_form" method="post" accept-charset="utf-8">
            <table>
                <tr>
                    <td><input type="text" name="description[]" class="form-control validate_form" id="description"><span class="error">This field is required.</span></td>

                    <td><input type="text" name="per_litre[]" class="form-control validate_form validate_number per_litre"><span class="error">This field is required.</span><span class="error">Please enter number.</span></td>
                </tr>
                <tr>
                    <td><input type="text" name="description[]" class="form-control validate_form" id="description"><span class="error">This field is required.</span></td>

                    <td><input type="text" name="per_litre[]" class="form-control validate_form validate_number per_litre"><span class="error">This field is required.</span><span class="error">Please enter number.</span></td>
                </tr>
            </table>

            <button type="submit" id="invoice_submit" class="btn btn-primary">Submit</button>
        </form>

Add style to hide error message:
     <style type="text/css">
        .error {
            color: red;
            display: none;
        }
    </style>

 Script for validate form fields by class name

    <script>
        $(document).on('click', '#invoice_submit', function(e){
            e.preventDefault();
            i = 0;
            $(".validate_form").each(function() {
                var selectedTr = $(this);
                var value = $(this).val();
                if (!value) {
                    selectedTr.next("span").show();
                    i++;
                } else {
                    selectedTr.next("span").hide();
                }
            });

            $(".validate_number").each(function() {
                var selectedTr = $(this);
                var value = $(this).val();

                var filter = /^[0-9]+([,.][0-9]+)?$/g;
                if (value != '') {
                    if (!filter.test(value)) {
                        selectedTr.next("span").next("span").show();
                        i++;
                    } else {
                      selectedTr.next("span").next("span").hide();
                    }
                }
            });
            if (i == 0) {
                $('#invoice_form').submit();
            }
        });
    </script>