javascript - 结束时间小于开始时间时的Javascript表单验证
问题描述
我有一个 html/php 代码，如下所示，属于以下屏幕截图，其中有一个下拉和输入框，我们选择Start Day of Week、Start Time、End Day of Week和End Time。
当我们在下面的屏幕截图中选择一周的同一天（包括Start Day of Week和End Day of Week ）时， end-time 应该总是大于 start time。此时，结束时间小于开始时间，这在技术上是不正确的。
<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) </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) </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")) {
}
}
解决方案
由于 Days 字段是有序的，您可以比较它们的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) </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) </p>
<input type="text" name="end_time" style="width: 12%;height: 22px;" value="">
</div>
</div>
</form>