JavaScript表單驗證沒有提交警告
[英]Javascript form validation no alert on submit
問題描述
我正在嘗試在提交表單之前驗證我的表單，但是即使表單被提交為空白，表單還是會被提交而不會出現任何警報。 單擊提交按鈕時，我要確保信息已完成且正確，如果信息為空白或不正確，則應在不提交表單的情況下發出警報。
謝謝
HTML
<!DOCTYPE html>
<html>
<head>
<title>Oaktown Football Club</title>
<meta charset="UTF-8">
<script src="formValidation.js"></script>
</head>
<body>
<header>
<img src="logo.png" alt="Oaktown Football Club Logo"/>
<h1>Oaktown Football Club</h1>
<nav>
<a href="Index.html">Homepage</a>
<a href="Competitions.html">Competitions</a>
<a href="Contact.html">Contact</a>
</nav>
</header>
<section>
<h2>Contact Us</h2>
<article>
<h3>Secretary</h3>
<p>Name: Laci Tanner</p>
<p>Phone: (02) 6620 3324</p>
<p>Email: <a href="mailto:secretary@oaktownfa.com.au">secretary@oaktownfa.com.au</a></p>
<h3>Leave us a message</h3>
<form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();">
<label>Full Name:</label><br>
<input type="text" size="35" name="fullName" id="name"><br>
<br><label>Email:</label><br>
<input type="text" size="35" name="email" id="email"><br>
<br><label>Phone:</label><br>
<input type="text" size="35" name="phone" id="phone"><br>
<br><label>Team:</label><br>
<select name="team"><br>
<option>Please Choose</option>
<option>Adults</option>
<option>Under 12s</option>
<option>Under 6s</option>
</select><br>
<br><label>I am:</label><br>
<select name="Member"><br>
<option>Please Choose</option>
<option>Thinking about joining the club</option>
<option>Already a club member</option>
</select><br>
<br><label>Comments:</label><br>
<textarea id="comments" type="text" rows="5" cols="75"></textarea><br>
<br><input id="submit" type="submit" value="Submit"><br>
<br><input type="reset">
</form>
</article>
</section>
<footer>
<p>Copyright - Oaktown Football Club</p>
</footer>
</body>
</html>
JavaScript的
function formValidation()
{
var name = document.contactForm.fullName;
var email = document.contactForm.email;
var phone = document.contactForm.phone;
var comment = document.contactForm.comment;
if (fullName.value == "") {
alert("Please enter your name!");
fullName.focus();
return false;
}
if (email.value == "") {
alert("Please enter your email address!");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (phone.value == "") {
alert("Please enter your phone number!");
phone.focus();
return false;
}
if (phone.length < 2) {
alert("Please enter a valid phone number!");
phone.focus();
return false;
}
if (comments.value == "") {
alert("Please leave us a comment!");
comments.focus();
return false;
}
{
return true;
}
}
3 個解決方案
解決方案1
0 已采納 2017-05-27 12:13:06
似乎您已經將' Full Name '的值存儲在變量'name'中，但是您正在檢查第一個' if '塊，正在檢查if "fullName.value == ''".
因此，拋出了“ 參考錯誤 ”。 將其更正為if "name.value == ''" ，代碼可以正常工作。
請找到JSBin工作代碼如下： - http://jsbin.com/kemokijucu/edit?html,js,console,output
解決方案2
0 2017-05-27 12:20:29
您的名字 ：
var name = document.contactForm.fullName;
但是通過fullName檢查：
if (fullName.value == "") {
alert("Please enter your name!");
fullName.focus();
return false;
}
請輸入代碼:)
解決方案3
0 2017-05-27 12:51:05
您從表單中獲取和使用name元素時犯了錯誤。 下面是JS中的更正。
function formValidation() { var fullName = document.contactForm.name; var email = document.contactForm.email; var phone = document.contactForm.phone; var comment = document.contactForm.comment; if (fullName.value == "") { alert("Please enter your name!"); fullName.focus(); return false; } if (email.value == "") { alert("Please enter your email address!"); email.focus(); return false; } if (email.value.indexOf("@", 0) < 0) { alert("Please enter a valid email address!"); email.focus(); return false; } if (email.value.indexOf(".", 0) < 0) { alert("Please enter a valid email address!"); email.focus(); return false; } if (phone.value == "") { alert("Please enter your phone number!"); phone.focus(); return false; } if (phone.length < 2) { alert("Please enter a valid phone number!"); phone.focus(); return false; } if (comments.value == "") { alert("Please leave us a comment!"); comments.focus(); return false; } { return true; } }
<title> Oaktown Football Club</title> <body> <header> <img src="logo.png" alt="Oaktown Football Club Logo" /> <h1>Oaktown Football Club</h1> <nav> <a href="Index.html">Homepage</a> <a href="Competitions.html">Competitions</a> <a href="Contact.html">Contact</a> </nav> </header> <section> <h2>Contact Us</h2> <article> <h3>Secretary</h3> <p>Name: Laci Tanner</p> <p>Phone: (02) 6620 3324</p> <p>Email: <a href="mailto:secretary@oaktownfa.com.au">secretary@oaktownfa.com.au</a></p> <h3>Leave us a message</h3> <form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();"> <label>Full Name:</label> <br> <input type="text" size="35" name="fullName" id="name"> <br> <br> <label>Email:</label> <br> <input type="text" size="35" name="email" id="email"> <br> <br> <label>Phone:</label> <br> <input type="text" size="35" name="phone" id="phone"> <br> <br> <label>Team:</label> <br> <select name="team"> <br> <option>Please Choose</option> <option>Adults</option> <option>Under 12s</option> <option>Under 6s</option> </select> <br> <br> <label>I am:</label> <br> <select name="Member"> <br> <option>Please Choose</option> <option>Thinking about joining the club</option> <option>Already a club member</option> </select> <br> <br> <label>Comments:</label> <br> <textarea id="comments" type="text" rows="5" cols="75"></textarea> <br> <br> <input id="submit" type="submit" value="Submit"> <br> <br> <input type="reset"> </form> </article> </section> <footer> <p>Copyright - Oaktown Football Club</p> </footer> </body>
請嘗試使用瀏覽器中的控制台進行調試。
您可以更改電子郵件字段的類型屬性，以email為場上自動電子郵件驗證。
沒有Alert（）的JavaScript驗證表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.