如何获取脚本以确保没有字段为空
很简单，我敢肯定...正如你可以看出的，这是相当新的！
我需要一个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>
叮当猫咪浏览 68回答 2
2回答
-
LEATH
在表单中，您需要将“选择”中的空白值设置为空<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> -
胡说叔叔
你必须像这样添加：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
随时随地看视频慕课网APP
相关分类
JavaScript