動的に追加されたフォームでjQueryの検証が機能しない

Question

AJAX呼び出しが成功した後にフォームを追加しています。私はそのフォームのIDを使用してバリデーションを入れようとしているとき、それは動作しません。以下は私のコードの例です。クリック

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

上

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

検証はすべてのヘルプは大歓迎です！前もって感謝します。

Answer 1

あなたはちょうどあなたがすなわち、 `$（ '＃のdynamic_form'）、DOMにそれらを追加した後.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>