8

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

  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>

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

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

请帮忙。

4

2 回答 2

20

关于创建新字段的代码：

// 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，您可以简单地将 a 添加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/TheE5K/6/

于 2013-07-14T20:21:25.370 回答
-1 
    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>
于 2019-01-02T12:53:52.687 回答