CODEWITHSUNDEEP
jqueryjquery-validate
Rohan Kumar
Rohan Kumar

Reputation: 40639

Jquery validation fails on dynamically added rows

I am using jquery validation plugin and it is not applied on dynically added rows my code is:

Html:

<form action="test.php" onsubmit="return false;">
    <div id="add_rows"> 
        <div class="new-row">
            <input type="text" required="required" name="qty[]" /><br />
            <textarea required="required" name="test[]" rows='4' cols='15'></textarea>
        </div>
    </div>
    <button>Add</button>
</form>

Script:

var frm=$('form').validate({
    submitHandler: function(form) {
        // do other stuff for a valid form
        alert('form submitted');
        return false;
    }
});

$('button').on('click',function(){
    $clone=$('.new-row:first').clone();
    $clone.find('input,textarea').val('');      
    $clone.insertAfter($('.new-row:last'));
    $clone.find('input,textarea').rules('add',{required:true});
    $('.new-row:last').find('input,textarea').rules('add',{required:true});
});

Fiddle

Another issue, I have tried it on my system and I got error like : TypeError: e is null for the line $clone.find('input,textarea').rules('add',{required:true}); if I remove then error not comes, but this error is not seen in fiddle

Upvotes: 0

Views: 1104

Answers (1)

Anton
Anton

Reputation: 32581

Try this, i think this is what you wanted

Added unique name to the textarea and input.

var incr = 0;
$('button').on('click',function(){
    incr++;
    $clone=$('.new-row:first').clone();
    $clone.find('input,textarea').val('');
    $clone.find('input').attr('name','qty'+incr+'[]');
    $clone.find('textarea').attr('name','test'+incr+'[]');

Demo here

Upvotes: 2

Related Questions