2017-05-27 92 views
0

我想在提交它之前验证我的表单,但是表单正在提交,无论如何没有任何提醒,即使表单提交空白。当点击提交按钮时,我想确保信息已经完成并且是正确的,并且当它是空白或不正确的时候,应该在不提交表单的情况下发出提醒。Javascript表单验证没有提交提醒

感谢

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:[email protected]">[email protected]</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; 
} 
} 
+0

preventDefault()会帮助你:) –

回答

0

看来你已经存储了 '全名' 可变 '名' 的值,但你检查你的第一个'如果'块,你正在检查if "fullName.value == ''".

因此,'参考错误'被抛出。 将其更正为if "name.value == ''"后,代码正常工作。

请在下面找到在JSBin工作代码: - http://jsbin.com/kemokijucu/edit?html,js,console,output

+0

另外,我注意到你正在检查一个电子邮件地址的有效性,只需检查它是否包含'。'。和'@'字符。 但是,只要进行这些条件检查,我甚至可以输入'.. @@'作为电子邮件地址,并将其视为有效! 因此,检查有效电子邮件地址的更好方法是使用“正则表达式”。您可以使用以下正则表达式来处理电子邮件: - '/ ^(([^ <>()\ [\] \\。,;:\ s @“] +(\。[^​​ <>()\ [\] \\;:\ S @ “] +)*)|(” +“))@((\ [[0-9] {1,3} \ [0-9] {1。 ,3} \ [0-9] {1,3} \ [0-9] {1,3}])|。。(([A-ZA-Z \ - 0-9] + \)+ [ a-zA-Z] {2,}))$ /' –

+0

如果OP需要帮助验证一个电子邮件地址,有很多[*问题与答案*](https://stackoverflow.com/search?q =%5Bjavascript%5D +验证+电子邮件地址)已经。;-) – RobG

+0

是的,但是很可能OP没有意识到这是他们的代码中的一个潜在的警告/陷阱,所以认为,如果她不是已经注意到的话,这很好。知道的。 –

0

你得到

var name = document.contactForm.fullName; 

但是,全名检查:

if (fullName.value == "") { 
    alert("Please enter your name!"); 
    fullName.focus(); 
    return false; 
} 

请了代码:)

0

您在使用表格中的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:[email protected]">[email protected]</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以进行自动电子邮件验证。