Javascript form validation when end time is lesser than start time

Question

I have a html/php code as shown below belonging to the following screenshot in which when there is a drop-down and input-box where we select Start Day of Week, Start Time, End Day of Week and End Time.

When we select same day (both for Start Day of Week and End Day of Week) of the week which is right now in the screenshot below then end-time should always be greater than start time. At this moment, end time is lesser than start time which is not technically right.


      
        
    
    
         
            Start Day of Week
            
            time(hhmm) 
            ''){echo $data->{"start_time"};} ?>">
        
        
             End Day of Week
             
            time(hhmm) 
            ''){echo $data->{"end_time"};} ?>">

Problem Statement:

I am wondering what JavaScript code I need to add when day of the week is same then end time should always be greater than start time. If its not form should not save and it should throw an error or warning.

The above html/php code is inside form tag with save button at the top.

This is what I have tried:

function check() {
  if((document.getElementById("startDay").value = "monday") && (document.getElementById("endDay").value = "monday")) {

    }
     else if((document.getElementById("startDay").value = "tuesday") && (document.getElementById("endDay").value = "tuesday")) {

    }   
      else if((document.getElementById("startDay").value = "wednesday") && (document.getElementById("endDay").value = "wednesday")) {

    }   
      else if((document.getElementById("startDay").value = "thursday") && (document.getElementById("endDay").value = "thursday")) {

    }   
      else if((document.getElementById("startDay").value = "friday") && (document.getElementById("endDay").value = "friday")) {

    }   
      else if((document.getElementById("startDay").value = "saturday") && (document.getElementById("endDay").value = "saturday")) {

    }   
      else if((document.getElementById("startDay").value = "sunday") && (document.getElementById("endDay").value = "sunday")) {

    }   
}

Moob · Accepted Answer

Since the Days fields are in order you can just compare their selectedIndex. Add an event listener to capture the form submission, then you can validate the inputs and prevent the submission if there's a problem.

Here's a demo to get you started. I'll leave you to fill in the blanks.

function onReady(fn) {//helper to wait for the DOM
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
function onSubmit(event){//handle the submit event
  var oops = document.getElementById("oops");
  console.clear();

  var startDay = myform.querySelector("select[name='select_start_day']").selectedIndex;
  console.log("startDay",startDay);
  
  var endDay = myform.querySelector("select[name='select_end_day']").selectedIndex;
  console.log("endDay",endDay);
  
  if(startDay>endDay){    
    event.preventDefault();//prevent submission
    oops.innerHTML="Start Day cannot be after End Day!";
    return;
  }
  if(startDay===endDay){ 
    console.log("Same day. Test the times!");
    //todo, check that the startTime is before the endTime
  }
  
  event.preventDefault();//for demo only. remove this line when you're ready to allow submission
  console.log("Would have been submitted if the line above is removed.");
    oops.innerHTML="";
}

//init
onReady(function(){
  console.log("ready");  
  var myform = document.getElementById("myform");
  myform.addEventListener("submit", onSubmit);
});




         
            Start Day of Week
            
            time(hhmm) 
            
        
        
             End Day of Week
             
            time(hhmm)

Javascript form validation when end time is lesser than start time

Answers (1)

Related Questions