validation of forms with rows

validation of forms with rows

Hi, I'm a newbie in javascript, please forgive me if this is plain and simple. I followed some tutorials on 
validation and got it al working for a simple form using: 


and my own validation file :

    <script src="validation.js"></script>

I can set if a field is required or has to be an email... But my form is a little bit more complex

I have a form which consists of multiple rows with the same data (different projectlines are shown for which tasks have to be created in the planning in this form). The html mockup of the page is : 


  2.             <form id="task-form">
  3.                 <div class="form-group row task" id="1">
  4.                     <div class="col col-sm-1">
  5.                         <input type="checkbox" class="form-control form-control-sm checkbox" name="makeTask">
  6.                     </div>
  7.                     <div class="col col-sm-2">
  8.                         <input type="text" class="form-control form-control-sm deadline" name="deadline" >
  9.                     </div>
  10.                     <div class="col col-sm-2">
  11.                         <input type="text" class="form-control form-control-sm" name="collaborator">
  12.                     </div>
  13.                     <div class="col col-sm-3">
  14.                         <input type="text" class="form-control form-control-sm" >
  15.                     </div>
  16.                     <div class="col col-sm-1">
  17.                         <input type="time" class="form-control form-control-sm" >
  18.                     </div>
  19.                     <div class="col col-sm-3">
  20.                         project line name
  21.                     </div>                    
  22.                 </div> 
  23.                 <div class="form-group row task" id="12">
  24.                     <div class="col col-sm-1">
  25.                         <input type="checkbox" class="form-control form-control-sm checkbox" name="makeTask">
  26.                     </div>
  27.                     <div class="col col-sm-2">
  28.                         <input type="text" class="form-control form-control-sm" name="deadline" >
  29.                     </div>
  30.                     <div class="col col-sm-2">
  31.                         <input type="text" class="form-control form-control-sm" name="collaborator">
  32.                     </div>
  33.                     <div class="col col-sm-3">
  34.                         <input type="text" class="form-control form-control-sm" >
  35.                     </div>
  36.                     <div class="col col-sm-1">
  37.                         <input type="time" class="form-control form-control-sm" >
  38.                     </div>
  39.                     <div class="col col-sm-3">
  40.                         project line name
  41.                     </div>                    
  42.                 </div> 
  43.                 <div class="form-group row task" id="12">
  44.                     <div class="col col-sm-1">
  45.                         <input type="checkbox" class="form-control form-control-sm checkbox" name="makeTask">
  46.                     </div>
  47.                     <div class="col col-sm-2">
  48.                         <input type="text" class="form-control form-control-sm" name="deadline" >
  49.                     </div>
  50.                     <div class="col col-sm-2">
  51.                         <input type="text" class="form-control form-control-sm" name="collaborator">
  52.                     </div>
  53.                     <div class="col col-sm-3">
  54.                         <input type="text" class="form-control form-control-sm" >
  55.                     </div>
  56.                     <div class="col col-sm-1">
  57.                         <input type="time" class="form-control form-control-sm" >
  58.                     </div>
  59.                     <div class="col col-sm-3">
  60.                         project line name
  61.                     </div>                    
  62.                 </div> 
  63.                 <button type="submit"  class="btn btn-primary" id="submit-button">Maak taken aan in th!nx</button>
  64.                 <button type="submit" class="btn btn-secondary">Terug naar th!nx</button>
  65.             </form>

If the user wants to plan a project-line, he ticks the first checkbox (make-Task). If this checkbox is ticked, the second field (deadline) is required. If it's not ticked, it's not required (because we won't plan it).

Questions
1) How can I check if the deadline field is not empty, only if the first field is ticked
2) My validation ONLY looks at the first row, doesn't validated the others (I just set deadline to always be required when playing around and noticed this. How do I check the other rows ?

PS my 'play-around' validation file :     <script src="validation.js"></script> looked like :

  1. $(function() {
  2.     
  3.     $("#task-form").validate({
  4.         
  5.         rules : {
  6.             deadline: {
  7.                 required: true
  8.             }
  9.         }
  10.     });
  11.     
  12. })