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

Question

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>

Answer 1

 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>

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

Why event handler in this particular case is not working?

javascript

jsp

eventhandler