jQuery Проверяет входной элемент массива, который создается динамически

Question

У меня есть форма, которую я хочу проверить с помощью плагина jQuery Validation. В настоящее время у меня есть проблема с элементом ввода с массивом (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>

Я создаю в них два режима: рабочий (динамический ввод текста без имени массива) и не рабочий (динамический ввод текста с именем массива).

Я шел, хотя эти решения, но, к сожалению, никто из них не работал:

• JQuery валидировать добавить правила для ввода массива
• jquery validate не работает с динамическим контентом
• JQuery проверить динамический массив ввода

Пожалуйста помоги.

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

ДЕМО: 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>