Javascript 验证可以添加或删除字段的动态表单

我有一个可以添加和删除字段的表单。 我根据我找到的一个教程构建了这个表单，它可以完美地工作，除非你忘记完成其中一个字段。PHP检查工作正常，即我的数据库中没有填充大量的空白值，但对用户来说，它似乎已经完成了所有检查

我一直在尝试用javascript验证我的表单，并尝试了几种方法，但我对JS的了解有限，我正在努力

这是我到目前为止编写的代码：

函数validateForm（）{
if（document.getElementById$（this.attr（“id”）.validity.valueMissing）{
警报（“请填写所有字段”）；
}
}
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'X'）；
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});  
$（“#提交”）。单击（函数（）{
$.ajax（{
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：函数（数据）{
警报（数据）；
$（'#添加_名称'）[0].reset（）；
}
}); 
});  
});  

添加更多
我做了一些更改，以便在选择了日期时您的代码可以捕捉到：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">  
  <form name="add_name" id="add_name" onsubmit="return validateForm()">  
    <div>  
      <table id="dynamic_field">  
        <tr> 
          <td><input type="date" name="date[]" id="date0" required /></td> 
          <td><textarea rows="6" cols="50" name="name[]" id="name0" placeholder="Enter the training session" required ></textarea></td>  
          <td><button type="button" name="add" id="add">Add More</button></td>  
        </tr>  
      </table>  
      <input type="button" name="submit" id="submit" value="Submit" />  
    </div>  
  </form>  
</div> 




<script>
function validateForm() {
  if (document.getElementById$(this).attr("id").validity.valueMissing) {
   alert("Please complete all of the fields");
  }
}
$(document).ready(function(){  
  var i=1;  
  $('#add').click(function(){  
    i++;  
    $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="date" name="date[]" id="date'+i+'" required /></td><td><textarea rows="6" cols="50" name="name[]" id="name'+i+'" placeholder="Enter the training session" required ></textarea></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">X</button></td></tr>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  


  $('#submit').click(function(){           

     var isValid = true; 
     for(var c=0; c <  i; c++)
       { 
          if ($('#date'+c).val()=='')
       { 
       alert('Please choose date') ;
       $('#date'+c).css({'border' : '1px solid red'});
        isValid = 0; 
       }  
       else 
       { $('#date'+c).css({'border' : '1px solid black'}); }  



       }  // end for   

       if(isValid) { doSave() }

  });  
});  


function doSave() { 
  $.ajax({  

            method:"POST",  
            data:$('#add_name').serialize(),  
            success:function(data){  
                 alert(data);  
                 $('#add_name')[0].reset();  
            }
       }); 

}
</script>


添加更多
函数validateForm（）{
if（document.getElementById$（this.attr（“id”）.validity.valueMissing）{
警报（“请填写所有字段”）；
}
}
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'X'）；
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});  
$（“#提交”）。单击（函数（）{
var isValid=true；
对于（var c=0；c
谢谢，这非常有效，正是我想要的。