How can I validate dynamically added dependent calendar fields

Question

I've a form on my website where I'm getting multiple event details from my customers. They can share event details and event date.

I want to let them able to add multiple events with details but dynamically. Currently I wrote JavaScript for this and it's working fine.

Now, what I want is each time the value for next date should be grater than the previous one. So If they added 2 events suppose, the date for the second event should be based on date for first event and should be greater and same is true for upcoming dates.

How can I do that?

 var tableCount = 1; var index = 1; $(document).on('click', 'button.add_time', function(e) { e.preventDefault(); tableCount++; $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table'); $('#timeTable' + tableCount).find("input").val(""); index++; $('#timeTable' + tableCount + ' .aa').html(tableCount); }); $(document).on('click', 'button.removeTime', function() { var closestTable = $(this).closest('table'); if (closestTable.attr('id') != "timeTable") { closestTable.remove(); } tableCount--; if (tableCount < 1) { tableCount = 1; } return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="table" class="form-group"> <table id="timeTable" class="tg"> <tr class="form-group"> <td class="aa">1</td> <td class="tg-yw4"> <button class="btn form-control btn-danger removeTime">Remove Events</button> </td> <td class="col-sm-4"> <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')"> </td> </tr> <tr> <td class="aa">1</td> <td class="tg-yw4">Event Description:</td> <td> ​<input name="event_descriptions[]" type="text" placeholder="Event description:" /> </td> </tr> </table> </div> <div class="my-5"> <button class="add_time btn btn-info">Add More Events</button> </div>

Answer 1

Whenever user inputs the date in input box you can check if the date which he/she has enter is less then previous date by looping through all previous dates inputs using each loop and depending on this show some error message.

Demo Code :

 var tableCount = 1; var index = 1; //on input of date $(document).on('input', 'input[name*=events]', function(e) { //get that date var edate = new Date($(this).val()); var $this = $(this).siblings("span.error"); $this.text("")//empty previous error if any //loop through dates inputs $("input[name*=events]").each(function() { if ($(this).val() != null) { //get input value var sdate = new Date($(this).val()) //check user input is less then previous date if (edate < sdate) { console.log("date is less then previous date"); $this.text("date is less then previous date")//show eror } } }) }); $(document).on('click', 'button.add_time', function(e) { e.preventDefault(); tableCount++; $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table'); $('#timeTable' + tableCount).find("input").val(""); index++; $('#timeTable' + tableCount + ' .aa').html(tableCount); }); $(document).on('click', 'button.removeTime', function() { var closestTable = $(this).closest('table'); if (closestTable.attr('id') != "timeTable") { closestTable.remove(); } tableCount--; if (tableCount < 1) { tableCount = 1; } return false; });

 .error { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="table" class="form-group"> <table id="timeTable" class="tg"> <tr class="form-group"> <td class="aa">1</td> <td class="tg-yw4"> <button class="btn form-control btn-danger removeTime">Remove Events</button> </td> <td class="col-sm-4"> <!--added this to show error --> <span class="error"></span> <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')"> </td> </tr> <tr> <td class="aa">1</td> <td class="tg-yw4">Event Description:</td> <td> ​<input name="event_descriptions[]" type="text" placeholder="Event description:" /> </td> </tr> </table> </div> <div class="my-5"> <button class="add_time btn btn-info">Add More Events</button> </div>