validation not working on dynamically generated element

Question

I am doing 'Add more' functionality in skills.

So i have form like,

<form id="myform">
    <a id="add_more">Add more</a>
    <div id="skills_wrap">
        <input type="text" name="skills[]"> 
    </div>
    <input type="submit" name="submit">
</form>

And script is like,

<script>
$(document).on("click","#add_more",function(){
  $("#skills_wrap").append('<input type="text" name="skills[]">');
});

$("#myform").validate({
    rules:{
        "skills[]":{ required:true }
    }
});
</script>

Here, validation works for first textbox only. For add more skills textbox validation does not work.

Any solution would be much appreciated.

Answer 1

I found solution:

I added one common class to all textboxes, and updated the code inside click event of add more link like this:

$(document).on("click","#add_more",function(){

    var i = $(".skill_name").length;

    $("#skills_wrap").append('<input type="text" name="skills['+i+']" class="skill_name" required>');

    $("input[name='skills["+i+"]']").rules("add", {
        required: true
    });

});