Проверка элементов, добавленных во время выполнения

Question

Я использую следующий скрипт, чтобы добавить поля ввода изображений на мою веб-страницу. Все работает нормально, но что делать, если я хочу сделать валидацию. Я не хочу отправлять форму, если какое-либо из полей пуст. Я попробовал функцию i.e кода validate(), но он проверяет только первое поле ввода, то есть поле ввода html. Он не работает для полей ввода, добавленных во время выполнения с помощью 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> 

И я хотел бы добавить функциональность удаления для полей изображения. Как поперечная кнопка рядом с каждым полем ввода, и поле удаляется при нажатии на эту кнопку.

<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

Вместо document.getElementById('file') использование document.getElementsByName('image_name[]') или JQuery стиль $('[name="image_name[]"]'). Это связано с тем, что тег id должен быть уникальным, иначе только на первый можно ссылаться на id.

Для удаления используйте функциональность что-то вроде этого:

$(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(); 
}