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;
});



  
    
      1
      
        
      

      
        
      
    

    
      1
      Event Description:

user_10606400 · Answer

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;
}



  
    
      1
      
        
      

      
       
        
        
      
    

    
      1
      Event Description:

How can I validate dynamically added dependent calendar fields

1 Answers