Question

我有一个表单，我想使用the jQuery Validation plugin进行验证。我目前有一个带有数组（name="inputname[]"）的input元素的问题，它是使用jQuery .on()动态创建的。让我解释一下这个问题：

有一个表单，其中一个输入文本名为name[]。
有一个按钮可以添加更多输入文本，这个元素用.on（）执行。我点击了2到3次，所以会有超过1个输入文本。
我点击提交，表单正确验证但它只验证第一个创建的数组元素而不是另一个元素。

对于完整代码，我在这里创建了一个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>

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

我一直在寻找这些解决方案，但不幸的是，他们中没有人工作过：

请帮忙。

Answer 1

关于创建新字段的代码：

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

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

另外，你真的不应该在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();
});

DEMO：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>

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

2 个答案: