Jquery-Validierung für dynamisch erstelltes Formular

Question

Ich erstelle ein Formular dynamisch, wenn ein Benutzer auf die Antwortschaltfläche klickt. Jetzt möchte ich das Formular validieren, das vor der Einreichung erstellt wurde.

Ich habe ähnliche Fragen für dynamisch erstellte Formularelemente gesehen, aber was ist mit einem Formular? Ich kann das nicht funktionieren lassen. Muss etwas Einfaches sein, das ich vermisse? Muss ich die Formularvalidierung auf andere Weise binden?

Das folgende HTML-Beispiel wird von Ajax geladen.

$(document).ready(function() { 
 
    \t $("#postroll").on("click", ".reply", function() { 
 
\t \t var row=$(this).parent().parent(); 
 
\t \t var postid=$(this).attr("postid"); 
 
\t \t $("<tr><td>&nbsp;</td><td><form name='reply' id='reply' method='post' action='ajax.php'><div class='form-group'><textarea class='form-control' name='replymessage' id='replymessage' rows='3' data-rule-required='true'></textarea><button class='btn btn-default' type='submit'>Submit</button></div></form></td><td>&nbsp;</td></tr>").insertAfter(row); 
 
\t }); 
 
\t 
 
\t $("#reply").validate({ 
 
\t \t onkeyup: false, 
 
\t \t onclick: false, 
 
\t \t highlight: function(element) { 
 
\t \t \t $(element).parent().addClass("has-error"); 
 
\t \t }, 
 
\t \t unhighlight: function(element) { 
 
\t \t \t $(element).parent().removeClass("has-error"); 
 
\t \t }, \t \t \t 
 
\t \t errorPlacement: function(error,element) { 
 
\t \t \t return true; 
 
\t \t }, \t \t \t \t 
 
\t \t submitHandler: function() { 
 
\t \t \t var postData = $("#reply").serializeArray(); 
 
\t \t \t var formURL = $("#reply").attr("action"); 
 
\t \t \t $.ajax({ 
 
\t \t \t \t url : formURL, 
 
\t \t \t \t type: "POST", 
 
\t \t \t \t data : postData, 
 
\t \t \t \t success : function() { 
 
\t \t \t \t \t $("#success").show(); 
 
\t \t \t \t \t $("#success").fadeOut(3000); 
 
\t \t \t \t }, 
 
\t \t \t \t error : function() { 
 
\t \t \t \t \t $("#fail").show(); 
 
\t \t \t \t \t $("#fail").fadeOut(3000); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } \t \t 
 
\t }); \t 
 
});

<div id="postroll"> 
 
    <input id="currentpage" type="hidden" value="1"> 
 
    <input id="pagecount" type="hidden" value="27"> 
 
    <input id="currentsort" type="hidden" value="0"> 
 
    <table class="table table-hover table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:20%">User</th> 
 
     <th style="width:60%">Message</th> 
 
     <th style="width:20%"> </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>&nbsp;</td> 
 
     <td>Message here.</td> 
 
     <td style="text-align:right;"> 
 
      <button class="btn btn-xs btn-primary confirm">Delete</button> 
 
      <button class="btn btn-xs btn-default cancel" style="display:none"> 
 
      <button id="280" class="btn btn-xs btn-danger delete" style="display:none">Confirm</button> 
 
      <button class="btn btn-xs btn-primary reply" postid="280" style="display: inline-block;">Reply</button> 
 
      <button class="btn btn-xs btn-danger cancel_reply" style="display: none;"> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

Wie LAROmega kommentiert - die Prüf-Funktion ausgewertet wurde, bevor das Formular erstellt wurde. Ich habe validate in die click-Funktion nach der Formularerstellung verschoben.

\t $("#postroll").on("click", ".reply", function() { 
 
\t \t var row=$(this).parent().parent(); 
 
\t \t var postid=$(this).attr("postid"); 
 
\t \t $(this).next(".cancel_reply").show(); 
 
\t \t $("<tr><td>&nbsp;</td><td><form name='reply' id='reply' method='post' action='ajax.php'><div class='form-group'><textarea class='form-control' name='replymessage' id='replymessage' rows='3' data-rule-required='true'></textarea><button class='btn btn-default' type='submit'>Submit</button></div></form></td><td>&nbsp;</td></tr>").insertAfter(row); 
 
\t \t $("#reply").validate({ 
 
\t \t \t onkeyup: false, 
 
\t \t \t onclick: false, 
 
\t \t \t highlight: function(element) { 
 
\t \t \t \t $(element).parent().addClass("has-error"); 
 
\t \t \t }, 
 
\t \t \t unhighlight: function(element) { 
 
\t \t \t \t $(element).parent().removeClass("has-error"); 
 
\t \t \t }, \t \t \t 
 
\t \t \t errorPlacement: function(error,element) { 
 
\t \t \t \t return true; 
 
\t \t \t }, \t \t \t \t 
 
\t \t \t submitHandler: function() { 
 
\t \t \t \t var postData = $("#reply").serializeArray(); 
 
\t \t \t \t var formURL = $("#reply").attr("action"); 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t \t url : formURL, 
 
\t \t \t \t \t type: "POST", 
 
\t \t \t \t \t data : postData, 
 
\t \t \t \t \t success : function() { 
 
\t \t \t \t \t \t $("#success").show(); 
 
\t \t \t \t \t \t $("#success").fadeOut(3000); 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t error : function() { 
 
\t \t \t \t \t \t $("#fail").show(); 
 
\t \t \t \t \t \t $("#fail").fadeOut(3000); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t } \t \t 
 
\t \t }); \t \t \t 
 
\t });