Question

我使用以下脚本将图像输入字段添加到我的网页。一切都很好，但如果我想进行验证怎么办？如果任何字段为空，我不想提交表单。我尝试了代码，即函数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();
}

验证在运行时添加的元素

1 个答案: