Проверка формы Javascript, когда время окончания меньше времени начала

Question

У меня есть html / php-код, как показано ниже, принадлежащий следующему снимку экрана, на котором, когда есть раскрывающийся список и поле ввода , где мы выбираем StartДень недели , Время начала , День окончания недели и Время окончания .

Когда мы выбираем один и тот же день (оба для Начальный день недели и Конечный день недели ) недели, которая сейчас показана на скриншоте ниже, тогда время окончания всегда должно быть больше времени начала . В этот момент время окончания меньше, чем время начала, что технически не правильно .

<form>
      <div style="text-align:right;margin-right:9px;">
        <button type="submit" onclick="check()">Save</button>
    </div>
    <div class="start-time+end-time" style="display:flex; text-align: center">
        <div class="start-time" style="display:inline-flex;align-items:center;justify-content:center;"> 
            <p>Start Day of Week</p>
            <select id="startDay" name="select_start_day" style="margin-left: 10px;">
                <option value="mon" name="select_start_day" <?php if($data->{"select_start_day"}==mon){echo 'selected';}?>>Monday</option>
                <option value="tue" name="select_start_day" <?php if($data->{"select_start_day"}==tue){echo 'selected';}?>>Tuesday</option>
                <option value="wed" name="select_start_day" <?php if($data->{"select_start_day"}==wed){echo 'selected';}?>>Wednesday</option>
                <option value="thu" name="select_start_day" <?php if($data->{"select_start_day"}==thu){echo 'selected';}?>>Thursday</option>
                <option value="fri" name="select_start_day" <?php if($data->{"select_start_day"}==fri){echo 'selected';}?>>Friday</option>
                <option value="sat" name="select_start_day" <?php if($data->{"select_start_day"}==sat){echo 'selected';}?>>Saturday</option>
                <option value="sun" name="select_start_day" <?php if($data->{"select_start_day"}==sun){echo 'selected';}?>>Sunday</option>         
            </select>
            <p style="margin-left:12px;margin-right:10px;">time(hhmm)&nbsp;</p>
            <input type="text" name="start_time" style="width: 12%;height: 22px;" value="<?php if($data->{"start_time"}<>''){echo $data->{"start_time"};} ?>">
        </div>
        <div class="end-time" style="display:inline-flex;align-items:center;justify-content:center;">
             <p>End Day of Week</p>
             <select id="endDay" name="select_end_day" style="margin-left: 10px;">
                <option value="mon" name="select_end_day" <?php if($data->{"select_end_day"}==mon){echo 'selected';}?>>Monday</option>
                <option value="tue" name="select_end_day" <?php if($data->{"select_end_day"}==tue){echo 'selected';}?>>Tuesday</option>
                <option value="wed" name="select_end_day" <?php if($data->{"select_end_day"}==wed){echo 'selected';}?>>Wednesday</option>
                <option value="thu" name="select_end_day" <?php if($data->{"select_end_day"}==thu){echo 'selected';}?>>Thursday</option>
                <option value="fri" name="select_end_day" <?php if($data->{"select_end_day"}==fri){echo 'selected';}?>>Friday</option>
                <option value="sat" name="select_end_day" <?php if($data->{"select_end_day"}==sat){echo 'selected';}?>>Saturday</option>
                <option value="sun" name="select_end_day" <?php if($data->{"select_end_day"}==sun){echo 'selected';}?>>Sunday</option>         
            </select>
            <p style="margin-left:12px;margin-right:10px;">time(hhmm)&nbsp;</p>
            <input type="text" name="end_time" style="width: 12%;height: 22px;" value="<?php if($data->{"end_time"}<>''){echo $data->{"end_time"};} ?>">
        </div> 
    </div>
</form>

Постановка задачи:

Мне интересно, что JavaScript код, который мне нужно добавить, когда день недели совпадает с , тогда время окончания всегда должно быть больше время начала . Если это не форма не должна сохранять и она должна выдать ошибку или предупреждение .

Приведенный выше html / php код находится внутри формы тега с кнопкой сохранения вверху.

Вот что я пробовал:

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")) {

    }   
}

Answer 1

Поскольку поля Дней в порядке, вы можете просто сравнить их selectedIndex. Добавьте прослушиватель событий для захвата отправки формы, затем вы можете проверить входные данные и предотвратить отправку в случае возникновения проблемы.

Вот демонстрация, чтобы вы начали. Я оставлю вас, чтобы заполнить пробелы.

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

<form id="myform">
<input type="submit" value="submit" /><div id="oops" style="color:red; font-weight:bold;"></div>
<div class="start-time+end-time" style="display:flex; text-align: center">
        <div class="start-time" style="display:inline-flex;align-items:center;justify-content:center;"> 
            <p>Start Day of Week</p>
            <select name="select_start_day" style="margin-left: 10px;">
                <option value="mon">Monday</option>
                <option value="tue">Tuesday</option>
                <option value="wed">Wednesday</option>
                <option value="thu">Thursday</option>
                <option value="fri">Friday</option>
                <option value="sat">Saturday</option>
                <option value="sun">Sunday</option>         
            </select>
            <p style="margin-left:12px;margin-right:10px;">time(hhmm)&nbsp;</p>
            <input type="text" name="start_time" style="width: 12%;height: 22px;" value="">
        </div>
        <div class="end-time" style="display:inline-flex;align-items:center;justify-content:center;">
             <p>End Day of Week</p>
             <select name="select_end_day" style="margin-left: 10px;">
                <option value="mon">Monday</option>
                <option value="tue">Tuesday</option>
                <option value="wed">Wednesday</option>
                <option value="thu">Thursday</option>
                <option value="fri">Friday</option>
                <option value="sat">Saturday</option>
                <option value="sun">Sunday</option>         
            </select>
            <p style="margin-left:12px;margin-right:10px;">time(hhmm)&nbsp;</p>
            <input type="text" name="end_time" style="width: 12%;height: 22px;" value="">
        </div> 
    </div>
    </form>