如何驗證動態添加的相關日歷字段

Question

我在我的網站上有一個表格，我可以從我的客戶那里獲得多個活動的詳細信息。 他們可以分享活動詳情和活動日期。

我想讓他們能夠添加多個帶有詳細信息但動態的事件。 目前我為此編寫了 JavaScript，它運行良好。

現在，我想要的是每次下一個日期的值都應該大於前一個。 因此，如果他們假設添加了 2 個事件，則第二個事件的日期應該基於第一個事件的日期，並且應該更大，即將到來的日期也是如此。

我怎樣才能做到這一點？

 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

每當用戶在輸入框中inputs日期時，您都可以檢查他/她輸入的日期是否小於前一個日期，方法是使用each循環遍歷所有以前的日期輸入，並根據此顯示一些錯誤消息。

演示代碼：

 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>