无法使用日历正常工作提醒

Question

function validateForm() {
var x = document.forms["confirm"].value;
if (x != "") {
alert("Thank you for your booking! We look forward to seeing you on soon!");
} else {
alert("Please enter a date for your booking!");
}
}

<form name="confirm" onsubmit="return validateForm()" method="post">
<input type="date" id="booking" name="booking">
<input type="submit" value="Book Now">
</form>

我希望提醒在输入任何日期的情况下感谢您的预订，如果该框为空，请输入日期。 谢谢！

Answer 1

function validateForm() {
var date = booking.value;
if (date) {
alert(`Thank you for your booking! We look forward to seeing you on ${date}!`);
} else {
alert("Please enter a date for your booking!");
return false;
}
}

<form name="confirm" onsubmit="return validateForm()" method="post">
<input type="date" id="booking" name="booking" required>
<input type="submit" value="Book Now">
</form>

Answer 2

这将起作用：

function validateForm() {
var x = document.querySelector('#booking').value;
if (x) {
alert("Thank you for your booking! We look forward to seeing you on soon!");
} else {
alert("Please enter a date for your booking!");
}
}

<form name="confirm" onsubmit="validateForm()" method="post">
<input type="date" id="booking" name="booking">
<input type="submit" value="Book Now">
</form>

Answer 3

2 个指针：

1(您的选择器错误。您需要 id 为booking的日期输入值。

2(你不一定需要与空字符串进行比较，只需if (x)即可。

function validateForm() {
var x = document.getElementById("booking").value;
if (x) {
alert("Thank you for your booking! We look forward to seeing you on soon!");
} else {
alert("Please enter a date for your booking!");  
}
}

Answer 4

因为您选择了表单元素，因此您应该在表单元素中选择"预订"元素。

可以看到下面。 并阅读此文档 https://developer.mozilla.org/en-US/docs/Web/API/Document/forms

function validateForm(e) {
var x = document.forms["confirm"];
let formData = x.elements[0].value;
if (formData != "") {
alert("Thank you for your booking! We look forward to seeing you on soon!");
} else {
alert("Please enter a date for your booking!");
}
}

<form name="confirm" onsubmit="return validateForm()" method="post">
<input type="date" id="booking" name="booking">
<input type="submit" value="Book Now">
</form>