为了账号安全,请及时绑定邮箱和手机立即绑定

如何获取脚本以确保没有字段为空

如何获取脚本以确保没有字段为空

叮当猫咪 2022-09-23 21:40:55

很简单,我敢肯定...正如你可以看出的,这是相当新的!


我需要一个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贡献1573条经验 获得超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>


查看完整回答
反对 回复 2022-09-23
?
胡说叔叔

TA贡献1499条经验 获得超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


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信