Validation for elements added on runtime - php

Question

I am using the following script to add image input fields to my webpage. Everything is working fine, but what if I want to do the validation. I dont want to submit the form if any of the fields are empty. I tried the code i.e function validate() but it only checks for the first input field, i.e the input field of html. It doesnot work for the input fields added in runtime with the help of Jquery.
<script type="text/javascript">
function validate () {
var file = document.getElementById('file').value;
if(file==""){
alert("None of the Image Fields can be empty!!");
return false;
}
}
$(document).ready(function(){
$('#addproduct').click(function(){
$(this).after('<br /><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> ');
});
});
</script>
And I would like to add the delete functionality for the image fields. Like a cross button beside every input field, and the field be removed when clicked on that button.
<input type="file" name="image_name[]" id="file" required="true">
<input type="text" name="image_caption[]" placeholder="Caption for this image " size="60">
<span id="addproduct"></span>

Answer 1

Instead of document.getElementById('file') use document.getElementsByName('image_name[]') or jQuery style $('[name="image_name[]"]'). This is because the id of a tag must be unique, else only the first one can be referenced by id.
For the delete functionality use something like this:
$(document).ready(function(){
$('#addproduct').click(function(){
$(this).after('<br /><div><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> <input type="button" value="Delete" onclick="deleteRow(this)" /> </div>');
});
});
var deleteRow = function(elem) {
$(elem).parent().remove();
}