jQuery Validate-Array-Eingabeelement, das dynamisch erstellt wird

Ich habe ein Formular, das ich validieren möchte das jQuery-Validierungs-Plugin. Ich habe derzeit ein Problem mit Eingabeelement mit Array (name="inputname[]"), die dynamisch mit jQuery erstellt werden .on(). Lassen Sie mich das Problem erklären:

1. Es existiert ein Formular, mit einem Eingabetext namens name[].
2. Es gibt eine Schaltfläche, um weitere Eingabetexte hinzuzufügen, und dieses Element wird mit .on() ausgeführt. Ich habe 2 oder 3 Mal geklickt, also gibt es mehr als 1 Eingabetext.
3. Ich klicke auf Senden, das Formular wird korrekt validiert, aber es validiert nur das erste erstellte Array-Element und nicht das andere Element.

Für den vollständigen Code habe ich hier eine jsfiddle erstellt: 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>

Ich erstelle zwei Modi darin, den funktionierenden (dynamischer Eingabetext ohne Array-Namen) und den nicht funktionierenden (dynamischer Eingabetext mit Array-Namen).

Ich habe diese Lösung durchgearbeitet, aber leider hat keine davon funktioniert:

• jquery validiert Hinzufügen-Regeln für eine Array-Eingabe
• jquery validate funktioniert nicht mit dynamischen Inhalten
• jQuery validiert dynamisches Eingabearray

Bitte helfen Sie.

In Bezug auf Ihren Code zum Erstellen der neuen Felder:

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

Der einzige Grund, warum Ihr “Modus 1” nicht funktioniert hat, liegt darin, dass Sie genau dasselbe Namensattribut zugewiesen haben, name="name[]"zu jedem einzelnen neu input. Das jQuery Validate-Plugin unbedingt erfordert das jeder input Element haben a einzigartig name Attribut. Verwenden Sie einfach Ihre numberIncr variabel darin name[] um diesen eindeutigen Namen zu gewährleisten.

Außerdem sollten Sie wirklich keine Regeln hinzufügen submit. Der submit Veranstaltung ist normalerweise, wo alle Regeln sind geprüft, daher macht das Hinzufügen von Regeln an dieser Stelle nicht viel Sinn. Die neuen Regeln sollten hinzugefügt werden, wenn die neuen Eingabefelder erstellt werden.

Für Ihren einfachen Fall, die rules('add') Methode ist sowieso übertrieben und Sie können Ihre vollständig eliminieren .on('submit') Handler. Da ist die Regel requiredkönnen Sie einfach ein hinzufügen class="required" zu deinem neuen input Elemente.

Hier ist Arbeitscode:

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/

    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>