我无法验证表单，我的表单中有两个字段，一个是select下拉列表，一个是datepicker。
我希望某人在选择下拉列表中选择“紧急处理”，并且他们选择从今天起5天之间的旅行日期，表格应显示一条消息“对于未来5天内的旅行，请在“应用程序类型”中选择“紧急处理”。您只能在5天后旅行”，并禁止提交。但似乎没有用。我在哪里错了？
<form name="search_form" method="post" onSubmit="onSubmit="return chk();" action="applyprocess.php" autocomplete="off">
<select name="applicationtype" class="textBoxDashed" id="applicationtype" onChange="myFunction(this)" required>
<option value="">Select..</option>
<option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
<option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
</select>
<input name="journeydate" id="journeydate" placeholder="DD/MM/YYYY" datepicker_format="DD/MM/YYYY" class="textBoxDashed" size="43" title="Please Enter your Date of Journey" required readonly>
<input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>
这是表单验证脚本
<script language="javascript">
if (trim(document.search_form.journeydate.value)==''){
alert("Please Enter Valid Journey Date ");
document.search_form.journeydate.focus();
return false;
}
var today = new Date();
var dd = today.getDate()+1;
var mm = today.getMonth()+1;//January is 0!`
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
var todayDate = dd+'../https/websitedownloaderio/MS_8.html'+mm+'/'+yyyy;
var number13 = Number(dd);
var monthNumber = Number(mm);
var yearNumber = Number(yyyy);
var currentDays = (monthNumber*30)+number13;
var jDate = document.search_form.journeydate.value;
var dd2 = jDate.slice(0,2);
var number12 = Number(dd2);
var mon2 = jDate.slice(3,5);
var yr2 = jDate.slice(6,10);
var monthNumber2= Number(mon2);
var yearNumber2 = Number(yr2);
var journeyDays = (monthNumber2*30)+number12;
if(number12>number13){
number12 = number12+30;
monthNumber2 = monthNumber2-1;
}
if(monthNumber2>monthNumber){
monthNumber2 = monthNumber2+12;
monthNumber2 = monthNumber2-1;
}
if(yearNumber2>yearNumber){
yearNumber2 = yearNumber2-yearNumber;
}
var finalDays = ((yr2-yyyy)*360)+((mon2-mm)*30)+(dd2-dd);
if(trim(document.search_form.applicationtype.value)=='Normal Processing' && finalDays<=5)
{
alert("For travel within next 5 days please select Urgent Processing in the Application Type. With normal Processing you can only travel after 5 day.");
document.search_form.applicationtype.focus();
return false;
}
if(trim(document.search_form.applicationtype.value)=='Urgent Processing' && finalDays>=30)
{
alert("Please select normal processing from the drop down because your arrival date is beyond 30 days.");
document.search_form.applicationtype.focus();
return false;
}
</script>
这是我用于日期选择器的内容：
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#journeydate" ).datepicker({
yearRange: '2018:2028',
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: +1
});
} );
</script>
答案 0 :(得分：0)
为什么不只是将选择的日期转换为UTC日期，然后检查现在+ 5 * 60 * 60 * 24是否大于该时间？
答案 1 :(得分：0)
好吧，我暂时不使用Jquery，如果愿意，可以使用它。我认为这应该可以解决您的问题。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script language="javascript">
function myFunction() {
var message,
aptype = document.getElementById('applicationtype'),
strVal = aptype.options[aptype.selectedIndex].value;
if (strVal == "Normal Processing") {
message = "Please Select Date between 5 days from now";
} else {
message = "Please Select Date between 10 days from now"
}
//let message = document.getElementById('message').value;
document.getElementById('message').innerHTML = message;
console.log(message);
}
function compareDate(e) {
var selectedDate = document.getElementById('journeydate').value,
today = new Date(),
future_date = new Date(today.setDate(today.getDate() + 5));
if (selectedDate < new Date() || selectedDate > future_date) {
console.log("successfully Selected Date");
} else {
//message = "Please Select Date between 5 days from now";
console.log("Please Select Date between 5 days from now");
}
e.preventdefault();
}
</script>
</head>
<body>
<form name="search_form" method="post" onSubmit="compareDate();" action="" autocomplete="off ">
<select name="applicationtype" class="textBoxDashed" id="applicationtype" onChange="myFunction(this)" required>
<option value=" ">Select..</option>
<option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
<option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
</select>
<div id="message"></div>
<input type="date" name="journeydate " id="journeydate" placeholder="DD/MM/YYYY ">
<!-- <input datepicker_format="DD/MM/YYYY " class="textBoxDashed
" size="43" title="Please Enter your Date of Journey " required readonly> -->
<input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>
</body>
</html>
答案 2 :(得分：0)
如果您使用date input field，该怎么办？
(() => {
const checkMark = document.querySelector("#checkedOk");
const dateInput = document.querySelector("#dateField");
document.querySelector("#checkDate").addEventListener("click", dateCheck);
function dateCheck() {
const value = new Date(dateInput.value);
const isOk = value
&& value >= new Date(dateInput.min)
&& value <= new Date(dateInput.max);
if (isOk) {
checkMark.classList.add("ok");
} else {
checkMark.classList.remove("ok");
}
return isOk;
}
})();body {
font: normal 12px/15px verdana, arial;
margin: 2em;
}
#checkedOk:before {
color: red;
font-weight: bold;
content: "X";
}
#checkedOk.ok:before {
content: "\2714";
color: green;
}<input id="dateField" type="date" min="2018-01-01" max="2028-12-31">
<button id="checkDate">Check</button>
<span id="checkedOk"></span>