如果我跳过输入，想要显示带有消息的警报框

Question

Error codes I created the signup form page and If I skip entering the information, I want to make an alert box with javascript.错误代码我创建了注册表单页面，如果我跳过输入信息，我想用 javascript 创建一个警告框。 But in JavaScript, it's showing the errors and doesn't show any alert if I skip.但是在 JavaScript 中，它会显示错误并且如果我跳过则不会显示任何警报。 Is there any way to fix it?有什么办法可以解决吗？ I will provide error codes with screenshot.我将提供带有屏幕截图的错误代码。 Also, I want to do that If I click submit, I want to show Your request is successful box.另外，我想这样做如果我单击提交，我想显示您的请求成功框。

 function validateForm() { var name = document.forms["myForm"]["name"].value; var email = document.forms["myForm"]["email"].value; var birthday = document.forms["myForm"]["birthday"].value; var interest = document.forms["myForm"]["shopping"].value; if (name == "") { alert("Name must be filled out"); return false; } if (email == "") { alert("Email must be filled out"); return false; } if (birthday == "") { alert("Fill your birthday please"); return false; } if (shopping == "1") { alert("Select your interested thing to do"); return false; } }

 <!DOCTYPE html> <html lang="en"> <head> <title>Busy Bee Florist</title> <meta charset="utf-8"> <link rel="stylesheet" a href="css/style.css"> </head> <body> <div id="containers"> <header> <a href="index.html"><img src="images/logo.png"></a> </header> <nav> <div class="navbar"> <a href="sign.html">Sign Up For Special Deals!"</a> <a href="contact.html">Contact</a> <a href="account.html">Account</a> <a href="cart.html">Cart</a> <a href="gallery.html">Gallery</a> <div class="dropdown"> <button class="dropbtn">Colors <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="white.html">White</a> <a href="red.html">Red</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Occasions </button> <div class="dropdown-content"> <a href="congratulations.html">Congratulations</a> <a href="generic.html">Generic</a> </div> </div> </div> </nav> <form></form> <form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post"></form> <div class="container"> <h1>Busy Bee Florist</h1> <h4> Please Fill Up In the Form</h4> <form> <fieldset> <legend>Personal Information:</legend> Full Name: <input type="text" style="margin-left: 18px;" name="name" placeholder="Your Name"><br><br> Email: <input type="email" style="margin-left: 51px;" placeholder="example@gmail.com" name="email"><br><br> Date of birth: <input type="date" name="birthday"> </fieldset> <br> Which special offers you interest most?<br><br> <input type="checkbox" name="shopping" value="Shopping"> Lemon Meringue Pie <br><br> <input type="checkbox" name="shopping" value="Dining"> Respberry Cake <br><br> <input type="checkbox" name="shopping" value="Dancing"> Bluebarry Muffins<br><br> <input type="checkbox" name="shopping" value="caramelslice"> Caramel Slice <br><br> <input type="checkbox" name="shopping" value="cheeryripeslice">Cheery Ripe Slice <br><br> <input type="checkbox" name="shopping" value="chocolatechip">Chocolate Chip Muffin<br><br> <div class="test3"><b>Terms and Condition</b><font color="red"></font></div> <div class="test3"> <input type="radio" name="TC" value="agree" >I Agree</div> <div class="test3"> <input type="radio" name="TC" value="disagree">I Disagree</div> <br><br> <div class="w"> <p>Please provide any additional feedbacks:- </p> <br><br> <textarea name="message" rows="5" cols="45" placeholder="Please Type Here...."></textarea> <br><br> </div> <br><br> <div id="q"> <button class="btn-submit" value="Submit Reservation" type="submit"> Submit </button> <button class="btn-reset" value="Clear Input" type="reset"> Clear Input</button> </div> </form> </div> </form> </body> </html>

Answer 1

Let's perform some clean up to your HTML code first.让我们首先对您的 HTML 代码进行一些清理。

You have this in your form declaration你的表单声明中有这个

<form></form>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post"></form>

Let's remove the empty form declaration and remove the close form tag immediately after your declaration.让我们删除空表单声明并在声明后立即删除关闭表单标记。 Change those 2 lines to the following:将这两行更改为以下内容：

<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">

It should function a lot more appropriately after those changes.在进行了这些更改之后，它应该会更适当地发挥作用。

Answer 2

You had a few issues, as I detailed out in my comment.正如我在评论中详述的那样，您遇到了一些问题。

Targeting the wrong form, myForm element was empty.针对错误的表单， myForm元素为空。 So I changed this accordingly.所以我相应地改变了这个。
In your JS, you had interest declared but you tried to use variable shopping which you did not declare.在您的 JS 中，您声明了interest ，但您尝试使用未声明的变量shopping 。 So I changed that shopping to interest .所以我把shopping改为interest 。

After amending all those mistakes, the code worked.在修正了所有这些错误之后，代码工作了。

 function validateForm(event) { event.preventDefault(); //Pause form from submitting. var name = document.forms["myForm"]["name"].value; var email = document.forms["myForm"]["email"].value; var birthday = document.forms["myForm"]["birthday"].value; var interest = document.forms["myForm"]["shopping"].value; if (name == "") { alert("Name must be filled out"); return false; } if (email == "") { alert("Email must be filled out"); return false; } if (birthday == "") { alert("Fill your birthday please"); return false; } if (interest == "1") { alert("Select your interested thing to do"); return false; } else event.target.submit(); //submit, all checks were completed }

 <!DOCTYPE html> <html lang="en"> <head> <title>Busy Bee Florist</title> <meta charset="utf-8"> <link rel="stylesheet" a href="css/style.css"> </head> <body> <div id="containers"> <header> <a href="index.html"><img src="images/logo.png"></a> </header> <nav> <div class="navbar"> <a href="sign.html">Sign Up For Special Deals!"</a> <a href="contact.html">Contact</a> <a href="account.html">Account</a> <a href="cart.html">Cart</a> <a href="gallery.html">Gallery</a> <div class="dropdown"> <button class="dropbtn">Colors <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="white.html">White</a> <a href="red.html">Red</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Occasions </button> <div class="dropdown-content"> <a href="congratulations.html">Congratulations</a> <a href="generic.html">Generic</a> </div> </div> </div> </nav> <div class="container"> <h1>Busy Bee Florist</h1> <h4> Please Fill Up In the Form</h4> <form name="myForm" action="action_page.php" onsubmit="validateForm(event)" method="post"> <fieldset> <legend>Personal Information:</legend> Full Name: <input type="text" style="margin-left: 18px;" name="name" placeholder="Your Name"><br><br> Email: <input type="email" style="margin-left: 51px;" placeholder="example@gmail.com" name="email"><br><br> Date of birth: <input type="date" name="birthday"> </fieldset> <br> Which special offers you interest most?<br><br> <input type="checkbox" name="shopping" value="Shopping"> Lemon Meringue Pie <br><br> <input type="checkbox" name="shopping" value="Dining"> Respberry Cake <br><br> <input type="checkbox" name="shopping" value="Dancing"> Bluebarry Muffins<br><br> <input type="checkbox" name="shopping" value="caramelslice"> Caramel Slice <br><br> <input type="checkbox" name="shopping" value="cheeryripeslice">Cheery Ripe Slice <br><br> <input type="checkbox" name="shopping" value="chocolatechip">Chocolate Chip Muffin<br><br> <div class="test3"><b>Terms and Condition</b><font color="red"></font></div> <div class="test3"> <input type="radio" name="TC" value="agree" >I Agree</div> <div class="test3"> <input type="radio" name="TC" value="disagree">I Disagree</div> <br><br> <div class="w"> <p>Please provide any additional feedbacks:- </p> <br><br> <textarea name="message" rows="5" cols="45" placeholder="Please Type Here...."></textarea> <br><br> </div> <br><br> <div id="q"> <button class="btn-submit" value="Submit Reservation" type="submit"> Submit </button> <button class="btn-reset" value="Clear Input" type="reset"> Clear Input</button> </div> </form> </div> </form> </body> </html>

如果我跳过输入，想要显示带有消息的警报框

问题描述

2 个解决方案

解决方案1
0 2022-05-25 13:57:47

解决方案2
0 2022-05-25 13:58:11

如果我跳过输入，想要显示带有消息的警报框

问题描述

2 个解决方案

解决方案1 0 2022-05-25 13:57:47

解决方案2 0 2022-05-25 13:58:11

解决方案1
0 2022-05-25 13:57:47

解决方案2
0 2022-05-25 13:58:11