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

Question

我有一个可以添加和删除字段的表单。 我从我找到的教程构建了表单，除非您忘记完成其中一个字段，否则它完美地工作。 PHP的检查工作，即我的数据库没有得到填充空白值的负载，但对用户来说，它看起来好像它已经全部通过。

我一直在尝试使用javascript验证我的表单，并尝试了几种方法，但是我对JS的知识有限，而且我很挣扎。

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

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(){   
 
     $.ajax({ 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="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="add" id="add">Add More</button></td> 
 
     </tr> 
 
     </table> 
 
     <input type="button" name="submit" id="submit" value="Submit" /> 
 
    </div> 
 
    </form> 
 
</div>

任何建议，将与表单验证非常有帮助。

Answer 1

我做了一些改变，所以如果日期已选定你的代码可以捕获：

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