如何通过 javascript 验证克隆的表单字段？

Posted 2023-05-08

【中文标题】如何通过 javascript 验证克隆的表单字段？

【英文标题】：How to validate a Cloned form fields by javascript?

【发布时间】：2022-01-17 10:14:12

【问题描述】：

// 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>

我想验证每个克隆的表单输入文件，验证是 -->至少应上传 4 张图像，否则该字段返回空值。但我有这个拳头形式。克隆后，id 将相同，这不起作用。如何为无限克隆表单编写这个？

【参考方案1】：

这将解决您的问题，因为这种格式 $('#upload_file').change(function() 在 dom 操作后不会触发

$(document).on('change','input[type="file"]',function()
 var images = $(this); 
 if(images.files.length<4) 
   alert ("Please Upload minimum 4 images."); 
   $(this).val(''); 
  
);

【讨论】：

弹出警告信息。但是输入类型中的值不会重置为空。它以克隆形式返回值。

您正在使用重复的 id 请使用类名代替并替换此行 document.getElementById('upload_file');到：$（这个）； $(document).on('change','input[type="file"]',function() //获取输入和文件列表 var images = $(this); if(images.files.length

对不起，我不明白。如果你不介意，你能改变你的答案吗？

答案已更新！