current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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:

Please help.

share|improve this question
1  
You are adding your rules when the form is submitted. This is all wrong. You should be adding your rules immediately after creating the new fields. –  Sparky Jul 14 '13 at 20:09
    
Please include enough code within OP to create a concise demo. Your OP should be fully "self-contained" and not be dependent upon external links. I've edited your OP to include the full code. –  Sparky Jul 14 '13 at 20:24

1 Answer 1

up vote 8 down vote accepted

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/

share|improve this answer
    
Hi Sparky, thank you for answer and warning. I never know there is a name[1], name[2] (number inside [] brackets). However, first I need to know how PHP process this variable, so I will try your code ASAP... Thanks. –  mokalovesoulmate Jul 15 '13 at 3:58
    
Update: I am applying what do you suggest on my form, now everything works correctly (and perfectly) like a charm. I also able to eliminate .on(submit). Thanks! –  mokalovesoulmate Jul 15 '13 at 17:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.