Show a similar type of error that min/max shows, if input start time > input end time

In the following code, the morning start time is allowed to be later than the morning and time. I want to show a similar type of error like my min/max JavaScript shows, if morning/afternoon start is greater than morning/afternoon end.

var timesOfDay = ["morning", "afternoon"];
const startTime = ["08:00:00", "13:00:00", "16:30:00", "17:30:00", "21:00:00"];
const endTime = ["13:00:00", "16:30:00", "17:30:00", "21:00:00", "08:00:00"];
i = 0;

timesOfDay.forEach(item =>
{
    //the error messages show correctly using the next 4 lines of code
    document.getElementById(item+"TimeStartArea").min = startTime[i];
    document.getElementById(item+"TimeStartArea").max = endTime[i];
    document.getElementById(item+"TimeEndArea").min = startTime[i];
    document.getElementById(item+"TimeEndArea").max = endTime[i];
    
    //I want to achieve something similar if morning/afternoon start time > morning/afternoon end time and vice versa
    if (document.getElementById(item+"TimeStartArea").value > document.getElementById(item+"TimeEndArea").value)
    {
        //show a similar error message on the correct input fields.
    }
    i++;
});
i = 0;

<form>
    
    Morning start: <input id="morningTimeStartArea" type="time" name="morningTimeStart" min="" max="" value="08:00:00" />
    Morning end: <input id="morningTimeEndArea" type="time" name="morningTimeEnd" min="" max="" value="13:00:00" /><br>
    
    afternoon start: <input id="afternoonTimeStartArea" type="time" name="afternoonTimeStart" min="" max="" value="13:00:00" />
    Afternoon end: <input id="afternoonTimeEndArea" type="time" name="afternoonTimeEnd" min="" max="" value="16:30:00" /><br>
    <input type="submit" name="submit" value="submit" />

</form>

Solution

You can update the min and max attributes on the corresponding time input element when the input element is updated.

Now, you are saying "I want to show a similar type of error like my min/max JavaScript shows". I haven't seen that, so a guess would be that you have the default validation. Here is an example using the default validation massages when the values are update.

reportValidity() will evaluate the entire form and show the messages if there is something not valid. In the default set up the required attribute is required.

const form = document.forms.time;

form.addEventListener('input', e => {
  let form = e.target.form;
  switch(e.target.name){
    case 'morningTimeStart':
      form.morningTimeEnd.min = e.target.value;
      form.reportValidity();
      break;
    case 'morningTimeEnd':
      form.morningTimeStart.max = e.target.value;
      form.reportValidity();
      break;
    case 'afternoonTimeStart':
      form.afternoonTimeEnd.min = e.target.value;
      form.reportValidity();
      break;
    case 'afternoonTimeEnd':
      form.afternoonTimeStart.max = e.target.value;
      form.reportValidity();
      break;
  }
});

form.addEventListener('submit', e => {
  e.preventDefault();
  console.log('form valid');
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

fieldset {
  border: none;
}

<form name="time">
  <fieldset>
    <label>Morning start: <input type="time" name="morningTimeStart"
      max="13:00:00" value="08:00:00" required></label>
    <label>Morning end: <input type="time" name="morningTimeEnd"
      min="08:00:00" value="13:00:00" required></label>
  </fieldset>
  <fieldset>
    <label>afternoon start: <input type="time" name="afternoonTimeStart"
       max="16:30:00" value="13:00:00" required></label>
    <label>Afternoon end: <input type="time" name="afternoonTimeEnd"
      min="13:00:00" value="16:30:00" required></label>
  </fieldset>
  <input type="submit" name="submit" value="submit">
</form>