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

Question

我有一个表格，我想使用the jQuery Validation plugin 进行验证。我目前对使用 jQuery .on() 动态创建的数组 (name="inputname[]") 的输入元素有疑问。让我解释一下这个问题：

1. 有一个表单，存在一个名为name[] 的输入文本。
2. 有一个添加更多输入文本的按钮，该元素使用 .on() 执行。我点击了 2 或 3 次，所以输入文本会超过 1 个。
3. 我点击提交，表单已正确验证，但仅验证第一个创建的数组元素，而不验证另一个元素。

对于完整的代码，我在这里创建了一个 jsfiddle：http://jsfiddle.net/ThE5K/4/

jQuery：

$(document).ready(function () {

    // MODE 1
    //   With [] or array name <<<< this one is not working
    $("#addInput").on('click', function () {
        $('#inputs').append($('<input class="comment" name="name[]" />'));
    });


    /* MODE 2
       Without [] or array name <<<< this one is working
       var numberIncr = 1;

        $("#addInput").on('click', function () {
           $('#inputs').append($('<input class="comment" name="name' + numberIncr + '" />'));
           numberIncr++;
       });
    */

    $('form.commentForm').on('submit', function (event) {

        $('input.comment').each(function () {
            $(this).rules("add", {
                required: true
            })
        });

        event.preventDefault();

        console.log($('form.commentForm').valid());
    })

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

HTML：

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

我在其中创建了两种模式，一种是工作模式（不带数组名称的动态输入文本），另一种是不工作模式（带数组名称的动态输入文本）。

我一直在研究这些解决方案，但不幸的是没有一个能奏效：

• jquery validate add rules for an array input
• jquery validate is not working with dynamic content
• jQuery validate dynamic input array

请帮忙。

Answer 1

关于创建新字段的代码：

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

您的“模式 1”不起作用的全部原因是您为每个新的 input 分配了相同的名称属性 name="name[]"。 jQuery Validate 插件绝对要求每个input 元素都有一个唯一 name 属性。只需在 name[] 中使用您的 numberIncr 变量来确保此名称的唯一性。

另外，你真的不应该在submit 上添加规则。 submit 事件通常是检查所有规则的地方，因此此时添加规则没有多大意义。创建新输入字段时应添加新规则。

对于您的简单情况，无论如何，rules('add') 方法对于这种情况来说太过分了，您可以完全消除您的 .on('submit') 处理程序。由于规则是required，您可以简单地将class="required" 添加到新的input 元素中。

这是工作代码：

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

演示：http://jsfiddle.net/ThE5K/6/

Answer 2

    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>