我正在使用JavaScript表单验证创建联系页面。调用validateContactForm()
时,似乎跳过了对senderName
字段的验证,并且首先执行了email
字段,也为message
工作。我在JS中对name
的定义是否存在问题?
对于nameVerify函数,我也遇到了一个未被捕获的TypeError,我不确定为什么...
我该如何纠正?
// Input text objects:
var name = document.forms["contactForm"]["senderName"];
var email = document.forms["contactForm"]["email"];
var message = document.forms["contactForm"]["message"];
// Error display objects:
var nameError = document.getElementById("nameError");
var emailError = document.getElementById("emailError");
var messageError = document.getElementById("messageError");
// Event listeners:
document.addEventListener("blur", nameVerify, true);
document.addEventListener("blur", emailVerify, true);
document.addEventListener("blur", messageVerify, true);
function validateContactForm() {
// Validate name:
if (name.value == "") {
name.style.border = "2px solid red";
nameError.innerHTML = "required";
name.focus();
return false;
}
// Validate email:
if (email.value == "") {
email.style.border = "2px solid red";
emailError.innerHTML = "required";
email.focus();
return false;
}
// Validate message:
if (message.value == "") {
message.style.border = "2px solid red";
messageError.innerHTML = "required";
message.focus();
return false;
}
}
// Event handlers:
function nameVerify() {
if (name.value != "") {
name.style.border = "2px sunken #BEBEBE";
nameError.innerHTML = "";
return true;
}
}
function emailVerify() {
if (email.value != "") {
email.style.border = "2px sunken #BEBEBE";
emailError.innerHTML = "";
return true;
}
}
function messageVerify() {
if (message.value != "") {
message.style.border = "2px sunken #BEBEBE";
messageError.innerHTML = "";
return true;
}
}
<form name="contactForm" method="post" action="#" onsubmit="return validateContactForm()">
<table id="contactFormTable" width="500px">
<tr>
<td valign="top">
<label for="senderName" class="ubuntuFont">name</label>
</td>
<td valign="top">
<input type="text" name="senderName" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label id="nameError" class="error ubuntuFont"></label>
</td>
</tr>
<tr>
<td valign="top">
<label for="email" class="ubuntuFont">email</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label id="emailError" class="error ubuntuFont"></label>
</td>
</tr>
<tr>
<td valign="top">
<label for="message" class="ubuntuFont">message</label>
</td>
<td valign="top">
<textarea name="message" maxlength="1000" cols="46" rows="6"></textarea>
</td>
</tr>
<tr>
<td valign="top">
<label id="messageError" class="error ubuntuFont"></label>
</td>
</tr>
</tr>
<tr>
<td colspan="2">
<input id="submitButton" class="ubuntuFont" type="submit" value="Submit" style="float: right;">
</td>
</tr>
</table>