Styjun

I'm creating a dynamic form that asks users to pick certain dates and tag a weight to that specific date. The user is free to add up to 12 inputs using a new row button.

I need to validate that form and make sure the user doesnt select the same date input from the select box and that the weight inputs across all added date inputs total to 100. Im not sure what to use for the validation part.

So far, I can only make sure the forms are not empty when attempting to submit.

Here is my html and JS code for the dynamic form

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>

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

The user shouldn't be able to continue unless the total weights equal to 100 and if there are no duplicate entries in the selection boxes.