フィールドを追加または削除できる動的フォームの検証

Question

フィールドを追加および削除できるフォームがあります。 私が見つけたチュートリアルからフォームを作成しました。フィールドの1つを忘れた場合を除いて、完全に機能します。 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>