动态PHP表单的表单验证

Question

我正在创建一个动态表格，要求用户选择特定日期并将重量标记为该特定日期。用户可以使用新的行按钮自由添加多达12个输入。

我需要验证该表单，并确保用户没有从选择框中选择相同的日期输入，并且所有添加的日期输入中的权重输入总计为100。我不确定用于验证部分的内容。

到目前为止，我只能确保尝试提交时表格不为空。

这是我的动态表单的html和JS代码

HTML：

<form method="post" action="viewInventory.php" id="insert_form">
              <div class="col-lg-12">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="table-repsonsive">
                       <table class="table table-borderless" id="item_table">
                        <tr>
                         <th>Month</th><br>
                         <th>Weight</th>
                        </tr>
                        <tr>
                          <input class = 'form-control' type = 'hidden' name = 'example' value = 8>
                          <td><select name="month[]" class="form-control item_unit" required><option value="" disabled>Select Product</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td>
                          <td><input type="number" name="weight[]" class="form-control item_name" required /></td>
                          <td><button type="button" name="add" class="btn btn-success btn-sm add">+</button></td>
                        </tr>
                       </table>
                    </div>
                  </div>
                </div>
              </div>

               <div class="col-lg-12">
                 <div align="center">
                  <a href="#confirm" data-target="#confirm" data-toggle="modal"><button type="button" class="btn btn-success">Submit</button></a>
                 </div>
               </div>

               <!-- // modal -->
               <div id="confirm" class="modal fade" role="dialog">
                   <div class="modal-dialog">
                           <div class="modal-content">

                               <div class="modal-header">
                                   <h4>Notice</h4>
                                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                               </div>

                               <div class="modal-body">
                                   <div class="text-center">
                                     <p>
                                       <h6>Confirm Job Order?</h6>

                                     </p>
                                   </div>
                                   <div class="modal-footer">
                                       <input type="submit" id="submit" name="choose" class="btn btn-success" value="Continue" />
                                       <button type="button" class="btn btn-default btn-outline-secondary" data-dismiss="modal">Close</button>
                                   </div>
                               </div>
                       </div>
                   </div>
               </div>

             </form>

还有我的JS：

<script type="text/javascript">
  $(document).ready(function(){

   $(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
      html += '<td><select name="month[]" class="form-control item_unit"><option value="">Select Month</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td>';
      html += '<td><input type="number" name="weight[]" class="form-control item_name" required /></td>';
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">x</button></td></tr>';
      $('#item_table').append(html);
     });

     $(document).on('click', '.remove', function(){
      $(this).closest('tr').remove();
     });

  });
</script>

除非总权重等于100并且选择框中没有重复的条目，否则用户将无法继续操作。