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

Question

我正在成功 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"
  }
})

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

Answer 1

您只需在使用 .valid() 之前验证表单 (.validate)

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>