为什么在这种情况下事件处理程序不起作用？

时间：2018-10-01 05:13:17

标签： javascript jsp eventhandler

employee_registration.jsp

当我单击文本框时，我希望错误消失，有人可以帮我调用这里的事件处理函数吗？错误会正确显示，但是每当我单击文本框时，都不会删除该特定错误。我应该如何获得这个权利？ 

var e_f_name = document.forms['employee_registration_form']['e_f_name'];
	var e_l_name = document.forms['employee_registration_form']['e_l_name'];
	var e_email = document.forms['employee_registration_form']['e_email'];

	var e_f_name_error = document.getElementById('e_f_name_error');
	var e_l_name_error = document.getElementById('e_l_name_error');
	var e_email_error = document.getElementById('e_email_error');

	e_f_name.addEventListener('blur', first_name_verify, true);
e_l_name.addEventListener('blur', last_name_verify, true);
e_email.addEventListener('blur', email_verify, true);

	function validate_employee_registration_form() {
		if (e_f_name.value == "" && e_l_name.value == "" && e_email.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_l_name_error.textContent = "Last name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_f_name.value == "" && e_l_name.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_l_name_error.textContent = "Last name must be filled out.";
			return false;
		}
		if (e_f_name.value == "" && e_email.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_l_name.value == "" && e_email.value == "") {
			e_l_name_error.textContent = "Last name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_f_name.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			return false;
		}
		if (e_l_name.value == "") {
			e_l_name_error.textContent = "Last name must be filled out.";
			return false;
		}
		if (e_email.value == "") {
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
	}
	function first_name_verify() {
	if (e_f_name.value != "") {
		e_f_name_error.innerHTML = "";
		return true;
	}
}
function last_name_verify() {
	if (e_l_name.value != "") {
		e_l_name_error.innerHTML = "";
		return true;
	}
}
function email_verify() {
	if (e_email.value != "") {
		e_email_error.innerHTML = "";
		return true;
	}
}
@charset "ISO-8859-1";

form {
	/* To center the form on the page */
	margin: 0 auto;
	width: 400px;
	/* To see the outline of the form */
	padding: 1em;
	border: 1px solid #ccc;

	/**
  margin-top: px;
  margin-bottom: px;
  margin-right: px;
  margin-left: px;
  **/
}

label {
	/* To make sure that all labels have the same size and are properly aligned */
	display: inline-block;
	width: 90px;
	text-align: right;
}

input, textarea {
	/* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
	font: 1em sans-serif;
	/* To give the same size to all text fields */
	width: 300px;
	box-sizing: border-box;
	/* To harmonize the look & feel of text field border */
	border: 1px solid #999;
}

input:focus, textarea:focus {
	/* To give a little highlight on active elements */
	border-color: #000;
}

textarea {
	/* To properly align multiline text fields with their labels */
	vertical-align: top;
	/* To give enough room to type some text */
	height: 5em;
}

.button {
	/* To position the buttons to the same position of the text fields */
	padding-left: 94px;
	/* same size as the label elements */
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Registration</title>
</head>
<body>
	<form name="employee_registration_form"
		onSubmit="return validate_employee_registration_form(this)"
		action="Employee_Controller_Servlet" method="post">
		<input type="hidden" name="command" value="REGISTRATION" />
		<div>
			<label for="emp_f_name">First Name:</label> <input type="text"
				id="emp_f_name" name="e_f_name">
			<div id="e_f_name_error"></div>
		</div>
		<br>
		<div>
			<label for="emp_l_name">Last Name:</label> <input type="text"
				id="emp_l_name" name="e_l_name">
			<div id="e_l_name_error"></div>
		</div>
		<br>
		<div>
			<label for="emp_email">E-mail:</label> <input type="email"
				id="emp_email" name="e_email">
			<div id="e_email_error"></div>
		</div>
		<br>
		<div class="button">
			<button type="submit">Register</button>
		</div>
	</form>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

	var e_f_name = document.forms['employee_registration_form']['e_f_name'];
	var e_l_name = document.forms['employee_registration_form']['e_l_name'];
	var e_email = document.forms['employee_registration_form']['e_email'];

	var e_f_name_error = document.getElementById('e_f_name_error');
	var e_l_name_error = document.getElementById('e_l_name_error');
	var e_email_error = document.getElementById('e_email_error');

	function validate_employee_registration_form() {
		if (e_f_name.value == "" && e_l_name.value == "" && e_email.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_l_name_error.textContent = "Last name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_f_name.value == "" && e_l_name.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_l_name_error.textContent = "Last name must be filled out.";
			return false;
		}
		if (e_f_name.value == "" && e_email.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_l_name.value == "" && e_email.value == "") {
			e_l_name_error.textContent = "Last name must be filled out.";
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
		if (e_f_name.value == "") {
			e_f_name_error.textContent = "First name must be filled out.";
			return false;
		}
		if (e_l_name.value == "") {
			e_l_name_error.textContent = "Last name must be filled out.";
			return false;
		}
		if (e_email.value == "") {
			e_email_error.textContent = "Email id must be filled out.";
			return false;
		}
	}

	function first_name_error_remove() {
		if (e_f_name.value != "") {
			e_f_name_error.innerHTML = "";
			return true;
		}
	}
	function last_name_error_remove() {
		if (e_l_name.value != "") {
			e_l_name_error.innerHTML = "";
			return true;
		}
	}
	function email_error_remove() {
		if (e_email.value != "") {
			e_email_error.innerHTML = "";
			return true;
		}
	}
   
@charset "ISO-8859-1";

form {
	/* To center the form on the page */
	margin: 0 auto;
	width: 400px;
	/* To see the outline of the form */
	padding: 1em;
	border: 1px solid #ccc;

	/**
  margin-top: px;
  margin-bottom: px;
  margin-right: px;
  margin-left: px;
  **/
}

label {
	/* To make sure that all labels have the same size and are properly aligned */
	display: inline-block;
	width: 90px;
	text-align: right;
}

input, textarea {
	/* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
	font: 1em sans-serif;
	/* To give the same size to all text fields */
	width: 300px;
	box-sizing: border-box;
	/* To harmonize the look & feel of text field border */
	border: 1px solid #999;
}

input:focus, textarea:focus {
	/* To give a little highlight on active elements */
	border-color: #000;
}

textarea {
	/* To properly align multiline text fields with their labels */
	vertical-align: top;
	/* To give enough room to type some text */
	height: 5em;
}

.button {
	/* To position the buttons to the same position of the text fields */
	padding-left: 94px;
	/* same size as the label elements */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Registration</title>

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form name="employee_registration_form"
		onSubmit="return validate_employee_registration_form(this)"
		action="Employee_Controller_Servlet" method="post">
		<input type="hidden" name="command" value="REGISTRATION" />
		<div>
			<label for="emp_f_name">First Name:</label> <input type="text"
				id="emp_f_name" name="e_f_name" oninput="first_name_error_remove()">
			<div id="e_f_name_error"></div>
		</div>
		<br>
		<div>
			<label for="emp_l_name">Last Name:</label> <input type="text"
				id="emp_l_name" name="e_l_name" oninput="last_name_error_remove()">
			<div id="e_l_name_error"></div>
		</div>
		<br>
		<div>
			<label for="emp_email">E-mail:</label> <input type="email"
				id="emp_email" name="e_email" oninput="email_error_remove()">
			<div id="e_email_error"></div>
		</div>
		<br>
		<div class="button">
			<button type="submit">Register</button>
		</div>
	</form>

</body>
</html>

相关问题
最新问题