我有以下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。这里有什么帮助?我只是看不出这个问题。
由于
答案 0 :(得分:3)
此代码:
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;
}
}
答案 1 :(得分:1)
您的许多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());
}
答案 2 :(得分:0)
如果您愿意为此添加jQuery,可以使用
$("#form1").submit(function(e) {
e.preventDefault();
if(validateForm()) {
// submit the form
}
});
请参阅jquery支持的示例:http://jsfiddle.net/2BmY8/
答案 3 :(得分:0)
else { return false; }
,validateName()
或validateOrg()
结构没有validateEmail()
条件。他们没有明确地返回false
,而是没有做任何事情(这足以让表单提交)。