如果我跳過輸入，想要顯示帶有消息的警報框
[英]Want to show alert box with message if I skip to input
問題描述
錯誤代碼我創建了注冊表單頁面，如果我跳過輸入信息，我想用 javascript 創建一個警告框。 但是在 JavaScript 中，它會顯示錯誤並且如果我跳過則不會顯示任何警報。 有什么辦法可以解決嗎？ 我將提供帶有屏幕截圖的錯誤代碼。 另外，我想這樣做如果我單擊提交，我想顯示您的請求成功框。
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>
2 個解決方案
解決方案1
0 2022-05-25 13:57:47
讓我們首先對您的 HTML 代碼進行一些清理。
你的表單聲明中有這個
<form></form>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post"></form>
讓我們刪除空表單聲明並在聲明后立即刪除關閉表單標記。 將這兩行更改為以下內容：
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">
在進行了這些更改之后，它應該會更適當地發揮作用。
解決方案2
0 2022-05-25 13:58:11
正如我在評論中詳述的那樣，您遇到了一些問題。
- 針對錯誤的表單，
myForm元素為空。 所以我相應地改變了這個。 - 在您的 JS 中，您聲明了
interest，但您嘗試使用未聲明的變量shopping。 所以我把shopping改為interest。
在修正了所有這些錯誤之后，代碼工作了。
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>
如果輸入框的內容已更改且未按下按鈕，如何顯示警報消息？
[英]How can I show alert message if input box content is changed and button is not pressed?
框顯示警報，但我想要其他方法，例如使用 if 鏈或開關或使用 for 循環或使用 map 運算符
[英]box show alert but i want other method like using of if chain or switch or using of for loop or using of map operator
當輸入框為空時，我想在單擊或按鍵（輸入鍵）時發出警報
[英]I want to alert on click or keypress ( enter key ) when the input box is empty
我想在我的文本框旁邊顯示錯誤消息，而不是在onkeyup事件中提醒
[英]I want to show error message beside my textbox rather than alert in onkeyup event
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.