// Cloning Form
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').val("").attr('name', function(i, val) {
return val + '-'+id_count;
});
clone.appendTo('.form-holder-append');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
.remove
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-folder">
<input type="file" name="variant_images" id="upload_file" required multiple>
<button class="remove">remove -</button>
</div>
<div class="form-holder-append"></div><br>
<button class="add">Add +</butoon>
// Cloning Form
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').val("").attr('name', function(i, val) {
return val + '-'+id_count;
});
clone.appendTo('.form-holder-append');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
//Image upload restriction
$(document).ready(function(){
$('#upload_file').change(function(){
//get the input and the file list
var images = document.getElementById('upload_file');
if(images.files.length<4){
alert ("Please Upload minimum 4 images.");
$("#upload_file").val('');
}
});
});
.remove
{
display:none;
}
.form-holder-append .remove {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-holder">
<input type="file" name="variant_images" id="upload_file" required multiple>
<button class="remove">remove - </button>
</div>
<div class="form-holder-append"></div><br>
<button class="add">add + </button>
I want to validate a each cloned forms input file, the validation is –>minimum 4 images should be uploaded otherwise the field returns empty value. But I have got this for fist form. After cloned, the id would be same and this is not working. How to write this for unlimited clone forms?