验证不适用于动态生成的元素

时间:2018-03-17 08:52:54

标签: jquery jquery-validate

我正在做'添加更多'技能的功能。

所以我的形式就像,

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

脚本就像,

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

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

此处,验证仅适用于第一个文本框。为了增加更多技能,文本框验证不起作用。

非常感谢任何解决方案。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案:

我在所有文本框中添加了一个公共类,并更新了点击事件中的代码,添加了更多链接,如下所示:

$(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
    });

});