jQuery验证不适用于动态附加表单

时间:2017-10-23 08:11:45

标签: javascript jquery

我在成功调用AJAX后添加了一个表单。当我试图通过使用该形式的id来进行验证时,它无效。以下是我的代码示例。

HTML

<div id="dynamic_form"></div>

的JavaScript

tab +=  '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab +=  '<div class="form-group">';
tab +=  '<label for="course">Course:</label>';
tab +=  '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab +=  '</div>';
tab +=  '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab +=  '</form>';
$('#dynamic_form').html(tab);

点击验证

$(document).on('click', '#submit_edit_edu_dtls' , function(e){
  if($("#edu_edit_datails").valid() == false) {
    alert("fail");
    return false;
  } else {
    alert(success);
    return true; 
  }
});
$("#edu_edit_datails").validate({
  rules: {
    course: "required"
  }
})

非常感谢任何帮助!提前谢谢。

1 个答案:

答案 0 :(得分:2)

您只需在使用.validate

之前验证表单(.valid()

var tab="";
tab +=  '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab +=  '<div class="form-group">';
tab +=  '<label for="course">Course:</label>';
tab +=  '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab +=  '</div>';
tab +=  '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab +=  '</form>';
$('#dynamic_form').html(tab);
$("#edu_edit_datails").validate({
    rules: {
        course: "required"
    }
})
$(document).on('click', '#submit_edit_edu_dtls' , function(e){
    if($("#edu_edit_datails").valid() == false){
         alert("fail");
         return false;
    }else{
        alert("success");
        return true; 
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<diV id="dynamic_form"></div>

相关问题