Add validation rules using jquery validate plug-in on dynamically generated elements

Question

I am trying to add some validation rules on an input created from html literals.

This is my fiddle: http://jsfiddle.net/idoxobi/HW4xY/1/

Html:

<form id='form' method='post' >
    <div id='details'>
    </div>
    <a id='Add' href='javascript:void()'>Add</a>
    <br />
    <input type='submit' />
</form>

JavaScript:

$(document).ready(function() {
    $('#form').validate();
    var input = "<input type='text' class='item' name='item' />";
    $('#Add').click(function() {
        $('#details').append(input+'<br />');
        $('#details input:last').rules('add', {
            required: true
        });
    });
})

It seems to recognize the rule just in the first element, but the others pass without validation.

Is the first time I use this plug-in, but in the forums everyone says this should work just fine.

Any suggestions?

YD1m · Accepted Answer · 2013-06-24 20:15:13Z

1

check this:

html:

<form id='form' method='post' >
    <div id='details'>
    </div>
    <a id='Add' href='#'>Add</a>
    <br />
    <input type='submit' />
</form>

js:

$(document).ready(function() {
    $('#form').validate();
    var i = 0;
    $('#Add').click(function() {

        var input = "<input type='text' class='item' name='item"+ i++ +"' />";
        $('#details').append(input+'<br />');
        $('#details input:last').rules('add', {
            required: true
        });

        return false;
    });
});

on jsfiddle

answered Jun 24, 2013 at 20:15

YD1m

5,9152 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj Yadav · Accepted Answer · 2013-06-24 20:24:25Z

0

Its because input field name is same for each, and it has been fixed by @YD1m, my method is as below:

$(document).ready(function() {
    $('#form').validate();
    var counter = 0;
    $('#Add').click(function() {
        counter++;
        $('#details').append("<input type='text' class='item required' name='item_" + counter + "' />" + '<br />');
    });
});

answered Jun 24, 2013 at 20:24

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

1 Comment

idoxobi Over a year ago

Thanks, the examples I saw before were just chunks of code with the "add rule" section and I didn't realized that also was necessary maintain an unique name in the inputs.

Collectives™ on Stack Overflow

Add validation rules using jquery validate plug-in on dynamically generated elements

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related