动态创建表单的 Jquery 验证答案

【问题标题】：Jquery validation for dynamically created form动态创建表单的 Jquery 验证
【发布时间】：2016-08-30 14:58:05
【问题描述】：

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

我已经看到关于动态创建的表单元素的类似问题，但是表单呢？我似乎无法完成这项工作？一定是我想念的简单东西吗？我需要以其他方式绑定表单验证吗？

下面的 HTML 示例由 ajax 加载。

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

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

【问题讨论】：

能否包含html
谢谢。 #postroll 的 HTML 是通过 ajax 添加的...将提取样本。
在单击过帐按钮之前不会创建您的表单。因此，当$("#reply").validate 被评估时，reply 还不存在。
好的，谢谢。之后我将如何评价？在点击函数内？

标签： jquery forms validation

【解决方案1】：

正如 LAROmega 所评论的 - 在创建表单之前正在评估 validate 函数。创建表单后，我将 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);
					}
				});
			}		
		});			
	});

【讨论】：