jQuery Validate array input element which is created dynamically

Question

I have a form which I want to validate using the jQuery Validation plugin. I currently have an issue with input element with array (name="inputname[]") which are created dynamically with jQuery .on(). Let me explain the issue:

1. There is a form, with one input text exist named name[].
2. There is a button to add more input texts, and this element executed with .on(). I clicked 2 or 3 times so there will be more than 1 input texts.
3. I click submit, the form is correctly validate but it is only validate the first created array element and not the another element.

For full code I created a jsfiddle here: 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>

I create two modes inside them, the working one (dynamic input text without array name) and the not working one (dynamic input text with array name).

I have been going though those solution but unfortunately no one of them worked:

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

Please help.

Answer 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>

Answer 2

Regarding your code for creating the new fields:

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

The entire reason your "Mode 1" was not working is because you've assigned the same exact name attribute, name="name[]", to every single new input. The jQuery Validate plugin absolutely requires that every input element have a unique name attribute. Just use your numberIncr variable within name[] to ensure this unique name.

Also, you really should not be adding rules upon submit. The submit event is normally where all the rules are checked, so adding rules at this point does not make a lot of sense. The new rules should be added when the new input fields are created.

For your simple case, the rules('add') method is overkill for this anyway and you can totally eliminate your .on('submit') handler. Since the rule is required, you can simply add a class="required" to your new input elements.

Here is working code:

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/