JavaScript表单验证跳过了第一个条件

时间:2018-08-25 04:03:47

标签: javascript html

我正在使用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>

0 个答案:

没有答案