很简单，我敢肯定...正如你可以看出的，这是相当新的！我需要一个JavaScript代码来确保表单中没有字段为空，包括文本，数字，电子邮件，电话...如果有一个字段恰好为 null，则应提交警报。如果所有字段中都有一些数据，则应提交警报以确认一切正常。任何人都可以帮忙吗？请？:D我的代码：<!DOCTYPE html><html><head> <title>Billma Tours - Bookings</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="myscripts.js"></script></head><body> <h1> Billma Tours </h1> <ul id="menubar"> <li><a href="index.html">Home</a></li> <li><a href="services.html">Services</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="customerbooking.html">Bookings</a></li> </ul> <br> <h2> Booking Management </h2> <div id="pagebrief"> <p> Welcome to our booking page. If you wish to make a booking, please fill out the form below and submit your request. </p> <p> Please ensure that all fields are filled in. For reference, the information table is below. </p> </div> <br> <table> <tr id="tabletop"> <td> Name of Tour Package </td> <td> Locations Included</td> <td> Cost Per Person </td> <td> Tour Guide </td> <td> Next Available Date </td> </tr> <tr> <td> Dine and Dusted </td> <td> Restaurants/Food retailers on central Wellington streets </td> <td> NZ$ 60.00 </td> <td> James Sanderson </td> <td> Monday, June 8, 2020 </td> </tr> <tr> <td> A View to a Thrill</td> <td> Wellington Cable Car, Brooklyn Wind Turbine, Mount Victoria </td> <td> NZ$ 130.50 </td> <td> Bill Colenso </td> <td> Thursday, June 11, 2020 </td> </tr> <tr> <td> Movie-ing On </td> <td> Weta Workshop, Park Road Post Production </td> <td> NZ$ 117.75 </td> <td> Xiulan Ma </td> <td> Wednesday, June 10, 2020 </td> </tr> <tr> <td> Water Sight to Behold </td> <td> Te Papa, New Zealand Parliament, Botanical Gardens </td> <td> NZ$ 150.00 </td> <td> James Sanderson </td> <td> Saturday, June 13, 2020 </td> </tr> </table> <br></html>
2 回答
LEATH
TA贡献1936条经验 获得超6个赞
在表单中，您需要将“选择”中的空白值设置为空
<option value=""> Please select an option </option>
并处理逻辑以检查无线电是否被检查为
if (x[i].type == 'radio') {
var checked = [...document.getElementsByName('Tour package')].find(c => c['checked']);
if (checked == undefined) {
valid = false;
break;
}
}
并使用 for 循环来检查窗体控件，如下所示
function validateForm() {
var x = document.forms["confirm"];
var valid = true;
for (var i = 0; i < x.length; i++) {
if (x[i].type == 'radio') {
var checked = [...document.getElementsByName('Tour package')].find(c => c['checked']);
if (checked == undefined) {
valid = false;
break;
}
}
else if (x[i].value == null || x[i].value == '') {
valid = false;
break;
}
}
if (!valid) {
alert("Please fill in all available fields.")
} else {
alert('Form is valid');
}
}
<!DOCTYPE html>
<html>
<head>
<title>Billma Tours - Bookings</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="myscripts.js"></script>
</head>
<body>
<h1> Billma Tours </h1>
<ul id="menubar">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="customerbooking.html">Bookings</a></li>
</ul>
<br>
<h2> Booking Management </h2>
<div id="pagebrief">
<p> Welcome to our booking page. If you wish to make a booking, please fill out the form below and submit your
request. </p>
<p> Please ensure that all fields are filled in. For reference, the information table is below. </p>
</div>
<br>
<table>
<tr id="tabletop">
<td> Name of Tour Package </td>
<td> Locations Included</td>
<td> Cost Per Person </td>
<td> Tour Guide </td>
<td> Next Available Date </td>
</tr>
<tr>
<td> Dine and Dusted </td>
<td> Restaurants/Food retailers on central Wellington streets </td>
<td> NZ$ 60.00 </td>
<td> James Sanderson </td>
<td> Monday, June 8, 2020 </td>
</tr>
<tr>
<td> A View to a Thrill</td>
<td> Wellington Cable Car, Brooklyn Wind Turbine, Mount Victoria </td>
<td> NZ$ 130.50 </td>
<td> Bill Colenso </td>
<td> Thursday, June 11, 2020 </td>
</tr>
<tr>
<td> Movie-ing On </td>
<td> Weta Workshop, Park Road Post Production </td>
<td> NZ$ 117.75 </td>
<td> Xiulan Ma </td>
<td> Wednesday, June 10, 2020 </td>
</tr>
<tr>
<td> Water Sight to Behold </td>
<td> Te Papa, New Zealand Parliament, Botanical Gardens </td>
<td> NZ$ 150.00 </td>
<td> James Sanderson </td>
<td> Saturday, June 13, 2020 </td>
</tr>
</table>
<br>
<div id="bookingform">
<h4> Personal Details </h4>
<p><span> First and Last Name: </span></p>
<form name="confirm" onsubmit="return validateForm()" method="post">
<input type="text" name="name">
<p><span> Phone Number: </span></p>
<input type="tel" name="phone">
<p><span> Email Address: </span></p>
<input type="email" name="emailaddress">
<br>
<h4> Tour Information</h4>
<p><span> Tour package: </span></p>
<input type="radio" name="Tour package" value="Dine and Dusted"> Dine and Dusted <br>
<input type="radio" name="Tour package" value="A View to a Thrill"> A View to a Thrill <br>
<input type="radio" name="Tour package" value="Movie-ing On"> Movie-ing On <br>
<input type="radio" name="Tour package" value="Water Sight to Behold"> Water Sight to Behold <br>
<p><span> Amount of people attending: </span></p>
<select name="no.pplattending">
<option value=""> Please select an option </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10+"> 10+ </option>
</select>
<p><span> Date of Tour: </span></p>
<input type="date" name="tourdate"><br>
<h4> Payment Details </h4>
<p><span> Name on Card: </span></p>
<input type="text" name="cardname">
<p><span> Card Number: </span></p>
<input type="number" name="cardnumber">
<p><span> Card Expiry: </span></p>
<input type="number" name="cardexpmonth">
<input type="number" name="cardexpyear">
<p><span> Card Security Code: </span></p>
<input type="number" name="cardsecurity">
<input type="submit" value="Submit">
</form>
<br>
</div>
<script>
</script>
</body>
</html>
胡说叔叔
TA贡献1804条经验 获得超8个赞
你必须像这样添加：return false;
function validateForm() {
var x = document.forms["confirm"]["code"].value;
if (x == null) {
alert("Please fill in all available fields.");
return false;
}
}
（并且您忘记了警报功能后面的分号）
也许HTML5表单验证也会很有趣：https://www.w3schools.com/html/html_form_attributes.asp
添加回答
举报
0/150
提交
取消