0
Ich habe ein HTML-Formular, das mit dem jQuery-Validierungs-Plugin validiert wird. Es funktioniert gut, aber das vollständige Ausmaß meines Projekts besteht darin, das Formular dynamisch zu klonen und an das vorherige Formular anzuhängen. Die dynamisch geklonten Formulare werden überhaupt nicht validiert. Wie kann ich meine dynamisch erstellten Formulare validieren? Meine "#addOne" -Schaltfläche erzeugt die dynamisch geklonten Formulare.Validierung dynamisch geklonter Formulare
Hier ist meine 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 {
}
});