JavaScript验证失败，但表单仍然提交
JavaScript验证失败，但表单仍然提交
提问于 2014-01-14 17:23:21
在用户输入中，我有以下HTML表单：
<form method = "post" action = "email.php" onsubmit = "return validateForm()" id = "form1">
<div class = "page">
<div class = "header">
<p>
<span>CiHA Webinar Booking Form</span>
<img src = "lifespanLogo.png" class = "logo">
</p>
</div>
<div class="splitter"></div>
<div class = "body">
<div id = "wbForm">
<p>
<label>
Webinar Date
</label>
<p>
<select name = "date" id = "date">
<option value = "choose">---</option>
<option value = "Wednesday 22nd January">Wednesday 22nd January 2014</option>
<option value = "Wednesday 29th January">Wednesday 29th January 2014</option>
</select>
</p>
</p>
<p>
<label>
Name
</label>
<input name = "name" type = "text" id = "name">
</p>
<p>
<label>
Organisation
</label>
<input name = "org" type = "text" id = "org">
</p>
<p>
<label>
Email Address
</label>
<input name = "email" type = "text" id = "email">
</p>
<p id="divButtonBar">
<input type="submit" name="submit" value="Submit">
</p>
</div>
</div>
<div class="footer">
©Property Tectonics 2014
</div>
</div>
</form>由这个JavaScript函数验证，该函数在一分钟内只检查字段是否为空：
<script>
function validateForm() {
if (validateDate()) {
if (validateName()) {
if (validateOrg()) {
if (validateEmail()) {
return true;
}
}
}
}
else {
return false;
}
}
function validateDate(){
var date = document.forms["form1"]["date"].value;
if (date.trim().length == 0) {
element = document.getElementById("date");
alert("Please choose a date");
element.focus();
return false;
}
else {
return true;
}
}
function validateName(){
var name = document.forms["form1"]["name"].value;
if (name.trim().length == 0) {
element = document.getElementById("name");
alert("Please enter your name");
element.focus();
return false;
}
else {
return true;
}
}
function validateOrg(){
var org = document.forms["form1"]["org"].value;
if (org.trim().length == 0) {
element = document.getElementById("org");
alert("Please enter your organisation");
element.focus();
return false;
}
else {
return true;
}
}
function validateEmail(){
var email = document.forms["form1"]["email"].value;
if (email.trim().length == 0) {
element = document.getElementById("email");
alert("Please enter your email address");
element.focus();
return false;
}
else {
return true;
}
}
</script>然而，当我故意将字段留为空白时，表单仍将提交并推进到email.php。这里有什么帮助吗？我只是看不出问题所在。
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-01-14 17:32:32
对于许多else语句，您没有if子句：
function validateForm() {
if (validateDate()) {
if (validateName()) {
if (validateOrg()) {
if (validateEmail()) {
return true;
} else {
return false;
}
} else {
return false;
}
} else {
return false;
}
}
else {
return false;
}
}或者，您可以将其简单地写成：
function validateForm() {
if (validateDate() && validateName() && validateOrg() && validateEmail()) {
return true;
}
else {
return false;
}
}或即使是：
function validateForm() {
return (validateDate() && validateName() && validateOrg() && validateEmail());
}Stack Overflow用户
发布于 2014-01-14 17:33:16
此代码：
function validateForm() {
if (validateDate()) {
if (validateName()) {
if (validateOrg()) {
if (validateEmail()) {
return true;
}
}
}
}
else {
return false;
}
}只有当validateDate()为false时才会返回false。
相反，可以尝试这样的方法：
function validateForm() {
if (validateDate() && validateName() && validateOrg() && validateEmail() ) {
return true;
}
else {
return false;
}
}Stack Overflow用户
发布于 2014-01-14 17:32:25
如果您愿意将jQuery添加到其中，您可以使用
$("#form1").submit(function(e) {
e.preventDefault();
if(validateForm()) {
// submit the form
}
});参见使用jquery支持的示例：http://jsfiddle.net/2BmY8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21119869
复制相关文章
相似问题
腾讯云开发者
