结束时间小于开始时间时的 Javascript 表单验证

Question

我有一个如下所示的html/php代码，属于以下屏幕截图，其中当有一个下拉和输入框时，我们选择>一周的开始日期、开始时间、一周的结束日期和结束时间。

当我们选择一周中的同一天(一周开始日和一周结束日)时，如下图所示，结束时间应始终大于开始时间。此时，结束时间小于开始时间，这在技术上是不正确的。

<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 代码位于 form 标记内，顶部有 保存按钮。

这是我尝试过的:

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>