Jquery Image Validation For Dynamically Cloned Form
I have a form in my HTML that will get cloned and appended dynamically when the user hits the #addOne button. The form gets validated successfully for any input errors, the only pr
Solution 1:
My advice when cloning is this:
Never clone elements that have been instrumented.
By instrumented, I mean they have JavaScript behavior set up on them, like event handling.
Instead do the following:
(1) Clone the elements before they have been instrumented and keep the clone in a variable.
var$CLONED_FORM = $('.article_properties_form:first').clone();
(2) Provide a function that will instrument the set of elements that are to be cloned.
functioninitializeForm($form, pageNum) {
// Set up form validation here.// Also attach the change-event handler for the file input here.
}
(3) Call the function for the sets that are already on the page.
$('.article_properties_form').each(function() {
initializeForm($(this), numPagesTemp--);
});
(4) When you want to add another set of the elements, clone the clone and add it, and call the function on it.
$('#addOne').click(function() {
var$newForm = $CLONED_FORM.clone().appendTo('.article_properties').show();
initializeForm($newForm, numPagesTemp--);
if (numPagesTemp == 0) {
$('#addOne').hide();
$(".nextBtn").show();
}
});
You also need to store the validator object in a variable named validator.
var validator = $form.validate({
Also, you should avoid duplicate id values when cloning. You have an id on the form submit button, but it does not appear to be needed, so perhaps you can just remove that.
Solution 2:
I need to use my code
Edit, Updated
Substituted class="properties_btn" for id="properties_btn" to prevent duplicate id being appended to document; defined validator at change event.
$(function() {
var numPagesTemp = 4;
$('.pageNumber:last').text(numPagesTemp);
$('.inputNumber:last').text(numPagesTemp);
//Invoke functions for first formadd_validation_for_forms();
add_image_construction();
//Form validationfunctionadd_validation_for_forms() {
$(".article_properties_form").each(function() {
$(this).validate({
errorElement: 'div',
rules: {
image: {
required: true,
extension: "jpg|jpeg|png",
minImageSize: {
width: 600,
height: 400
}
},
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"
},
},
});
});
}
//Adding a form
$('#addOne').click(function() {
numPagesTemp--;
var articlePropsTemplate = $('.article_properties_form:last')
.clone();
articlePropsTemplate.find("img").remove();
$('.article_properties').append(articlePropsTemplate);
var articlePropsExpand = $('.expand:last').clone();
articlePropsExpand.text("Expand " + numPagesTemp);
articlePropsExpand.hide();
$('.article_properties').append(articlePropsExpand);
$('.pageNumber:last').text(numPagesTemp);
$('.inputNumber:last').text(numPagesTemp);
$("form:last")[0].reset();
add_validation_for_forms();
// add_image_construction();
articlePropsTemplate.validate().resetForm();
if (numPagesTemp == 1) {
$('#addOne').hide();
$(".nextBtn").show();
}
});
//Adding Method
$.validator.addMethod('minImageSize', function(value, element, minSize) {
var imageSize = $(element).data('imageSize');
return (imageSize) && (imageSize.width >= minSize.width) && (imageSize.height >= minSize.height);
}, function(minSize, element) {
return ($(element).data('imageSize')) ? ("Your image's size must be at least " + minSize.width + "px by " + minSize.height + "px") : "Selected file is not an image.";
});
//Image Uploading// var $properties_btn = $('.properties_btn'),// $imgContainer = $('.imgContainer'),// $pageImg = $('.pageImg');functionadd_image_construction() {
$(document).on("change", ".pageImg", function(e) {
var form = $(this).closest("form");
var validator = form.validate();
$(this).removeData('imageSize');
form.find('.imgContainer').hide().empty();
var file = this.files[0];
if (file.type.match(/image\/.*/)) {
form.find('.properties_btn').attr('disabled', true);
var reader = newFileReader();
reader.onload = function() {
var $img = $('<img />').attr({
src: reader.result
});
$img.on('load', function() {
form.find('.imgContainer').append($img).show();
$(e.target).data('imageSize', {
width: $img.width(),
height: $img.height()
});
$img.css({
width: '400px',
height: '200px'
});
form.find('.properties_btn').attr('disabled', false);
validator.element(e.target);
});
}
reader.readAsDataURL(file);
} else {
validator.element(e.target);
}
});
}
})form {
border: 1px solid blue;
padding: 10px;
margin: 10px;
}<scriptsrc="https://code.jquery.com/jquery-3.0.0.js"></script><scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script><scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js"></script><divclass="article_properties"><formclass="article_properties_form"action=""method="POST"enctype="multipart/form-data"><pstyle="display: inline">Page Number</p><divstyle="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px"><pstyle="display: inline"class="pageNumber"></p></div><textareastyle="display: none"class="inputNumber"name="pages"></textarea><p>Image</p><inputstyle="padding: 0px"type="file"name="image"class="pageImg"><divclass="imgContainer"></div><p>Subtitle</p><inputtype="text"name="subtitle"><p>Text</p><textareaname="text"rows="4"></textarea><inputclass="properties_btn"type="submit"value="Submit/Update"name="properties_submit"><hrstyle="border: 1px dotted lightgray; margin-bottom: 50px"></form><astyle="display: none; text-align: center; margin: 50px; font-size: 25px"class="expand"href="#"></a></div><!--End of article properties div--><divid="addOne"><p>+Add page</p></div><divclass="nextBtn"style="display: none"><p>Finalize my article</p></div>This is a simplified version of what you are trying to achieve, without validating uploaded file
// maximum number of `form` elements which `document` should containvar n = 4;
// display `form` indexfunctionhandleLabel() {
$("label").html(function(index, html) {
return"form #" + index
})
}
handleLabel();
functionprocessFile() {
// preview uploaded image
$("<img>", {src: URL.createObjectURL(this.files[0])})
.insertAfter(this.nextElementSibling).after("<br>");
}
// handle file upload; delegate event to `document`
$(document).on("change", ":file", processFile);
// append cloned `form` to page
$("button").on("click", function() {
// if less than `n` formsif ($("form").length < 4) {
// copy last `form` `.outerHTML` instead of using `.clone()`
$($("form:last")[0].outerHTML)
// remove `img` from `html`
.find("img").remove().end()
.insertAfter("form:last");
// update `form` `label` elementshandleLabel();
} else {
// detach `click` event from `button`// when four `form` elements exist in `document`
$(this).off("click")
}
});
// handle `form` submit event
$(document).on("submit", "form", function(e) {
var img = $(this).find("img")[0];
// check `img` `width`, `height`if (img.naturalWidth < 600
|| img.naturalHeight < 400) {
e.preventDefault();
this.reset();
alert("invalid img width or height")
}
})form {
border: 1px solid blue;
padding: 10px;
margin: 10px;
}<scriptsrc="https://code.jquery.com/jquery-3.0.0.js"></script><form><fieldset><label></label><br><inputname="file"type="file"accept=".jpg,.jpeg,.png"required /><br><inputtype="submit" /></fieldset></form><button>
add form
</button>jsfiddle https://jsfiddle.net/hLjvffpv/5/
Post a Comment for "Jquery Image Validation For Dynamically Cloned Form"