0
我有一個使用jQuery驗證插件進行驗證的HTML表單。它工作正常，但我的項目的全部範圍是動態克隆和附加到以前的形式的形式。動態克隆的表單根本不驗證。我如何驗證我的動態創建的表單？我的「#addOne」按鈕生成動態克隆的表單。驗證動態克隆表格
這裏是我的jsfiddle：https://jsfiddle.net/37jhbb5g/5/
HTML
<div class="article_properties">
<form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
<p style="display: inline">Page Number</p>
<div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">
<p style="display: inline" class="pageNumber"></p>
</div>
<textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
<p>Image</p>
<input style="padding: 0px" type="file" name="image">
<p>Subtitle</p>
<input type="text" name="subtitle">
<p>Text</p>
<textarea name="text" rows="4"></textarea>
<input id="properties_btn" type="submit" value="Submit/Update">
<hr style="border: 1px dotted lightgray; margin-bottom: 50px">
</form>
</div>
<!--End of article properties div-->
<div id="addOne">
<p>+Add page</p>
</div>
jQuery的
$(".article_properties_form").validate({
errorElement: 'div',
rules: {
image: {
required: true,
extension: "jpg,jpeg"
},
subtitle: {
required: true,
minlength: 2,
maxlength: 25
},
text: {
required: true,
minlength: 35,
maxlength: 275
}
},
messages: {
image: {
required: "This page needs an image",
extension: "You're only allowed to upload jpg or png images."
},
subtitle: {
required: "You have to provide a subtitle for this page!",
minlength: "Your subtitle must be at least 2 characters long",
maxlength: "Your subtitle must be less than 25 characters long"
},
text: {
required: "Please enter text for this page",
minlength: "Your text must be at least 35 characters long",
maxlength: "Your text must be less than 275 characters long"
},
},
});
var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);
$('#addOne').click(function() {
numPages--;
if (numPages == 1) {
var articlePropsTemplate = $('.article_properties_form:last').clone();
$('.article_properties').append(articlePropsTemplate);
$('.pageNumber:last').text(numPages);
$('.inputNumber:last').text(numPages);
articlePropsTemplate[0].reset();
$('.nextBtn').fadeIn("slow");
$('#addOne').hide();
} else {
var articlePropsTemplate = $('.article_properties_form:last').clone();
$('.article_properties').append(articlePropsTemplate);
articlePropsTemplate[0].reset();
$('.pageNumber:last').text(numPages);
$('.inputNumber:last').text(numPages);
}
});
$('body').on('submit', '.article_properties_form', function(e) {
e.preventDefault();
if ($('.article_properties_form').valid()) {
$.ajax({
type: 'POST',
url: '',
data: $(this).serialize(),
success: function(data) {
}
});
} else {
}
});