动态创建表单的Jquery验证

Question

我在用户点击回复按钮时动态创建表单。现在我想验证在提交之前创建的表单。

我已经看到了动态创建的表单元素的类似问题，但是表单怎么样？我似乎无法做到这一点？一定是简单的我错过了吗？我是否需要以另一种方式绑定表单验证？

下面的HTML示例由ajax加载。

＆＃13;

＆＃13;

$(document).ready(function() {
  	$("#postroll").on("click", ".reply", function() {
		var row=$(this).parent().parent();
		var postid=$(this).attr("postid");
		$("<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);
	});
	
	$("#reply").validate({
		onkeyup: false,
		onclick: false,
		highlight: function(element) {
			$(element).parent().addClass("has-error");
		},
		unhighlight: function(element) {
			$(element).parent().removeClass("has-error");
		},			
		errorPlacement: function(error,element) {
			return true;
		},				
		submitHandler: function() {
			var postData = $("#reply").serializeArray();
			var formURL = $("#reply").attr("action");
			$.ajax({
				url : formURL,
				type: "POST",
				data : postData,
				success : function() {
					$("#success").show();
					$("#success").fadeOut(3000);
				},
				error : function() {
					$("#fail").show();
					$("#fail").fadeOut(3000);
				}
			});
		}		
	});	
});

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如LAROmega所评论的那样 - 在创建表单之前正在评估验证功能。我在表单创建后将validate移动到了click函数中。

	$("#postroll").on("click", ".reply", function() {
		var row=$(this).parent().parent();
		var postid=$(this).attr("postid");
		$(this).next(".cancel_reply").show();
		$("<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);
		$("#reply").validate({
			onkeyup: false,
			onclick: false,
			highlight: function(element) {
				$(element).parent().addClass("has-error");
			},
			unhighlight: function(element) {
				$(element).parent().removeClass("has-error");
			},			
			errorPlacement: function(error,element) {
				return true;
			},				
			submitHandler: function() {
				var postData = $("#reply").serializeArray();
				var formURL = $("#reply").attr("action");
				$.ajax({
					url : formURL,
					type: "POST",
					data : postData,
					success : function() {
						$("#success").show();
						$("#success").fadeOut(3000);
					},
					error : function() {
						$("#fail").show();
						$("#fail").fadeOut(3000);
					}
				});
			}		
		});			
	});