JAvascript验证功能不太正常

下面我有一个表和一个javascript验证函数：

HTML表格：

<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='newCourseId' name='CourseIdnew' value='' /> </td>
</tr>
<tr>
<th>Course ID:</th>
<td><input type='text' id='newCourseNo' name='CourseNoNew' value='' /> </td>
</tr>
<div id='courseidAlert'></div>
<tr>
<th>Course Name:</th> 
<td><input type='text' id='newCourseName' name='CourseNameNew' value='' /> </td>
</tr>
<div id='coursenameAlert'></div>
<tr>
<th>Duration (Years):</th> 
<td id='data'>{$durationHTML}</td>
    </tr>
    <div id='durationAlert'></div>
    </table>

  function editvalidation() {

                var isDataValid = true;


                var newCourseNoO = document.getElementById("newCourseNo");
                var newCourseNameO = document.getElementById("newCourseName");
                var newCourseDurationO = document.getElementById("newDuration");


            var newCourseIdMsgO = document.getElementById("courseidAlert");
            var newCourseNameMsgO = document.getElementById("coursenameAlert");
            var newDurationMsgO = document.getElementById("durationAlert");


  if (currentCourseO.value == ""){
          $('#targetdiv').hide();
          currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
          newCourseIdMsgO.innerHTML = "";
          newCourseNameMsgO.innerHTML = "";
          newDurationMsgO.innerHTML = "";
          isDataValid = false; 
    }else{            
  if (newCourseNoO.value == ""){
          $('#targetdiv').hide();
          newCourseIdMsgO.innerHTML = "Please fill in the Course ID in your Edit";
          isDataValid = false;
  }if (newCourseNameO.value == ""){
          $('#targetdiv').hide();
          newCourseNameMsgO.innerHTML = "Please fill in the Course Name in your Edit";
          isDataValid = false;      
  }if (newCourseDurationO.value == ""){
          $('#targetdiv').hide();
          newDurationMsgO.innerHTML = "Please select a Course Duration in your Edit";
          isDataValid = false;   
            }else{
          newCourseIdMsgO.innerHTML = "";
          newCourseNameMsgO.innerHTML = "";
          newDurationMsgO.innerHTML = "";
        }


        return isDataValid;

        }
    }

我对上述验证有两个问题

问题1：它没有在相关表单功能下方显示错误，错误显示在表单上方。例如，如果用户没有输入courseid，则错误应该显示在课程id文本输入下方

问题2：

如果我将表单/表格留空，则会显示所有错误，但如果我填写其中一个文本输入（例如）并重新提交，则仍会显示所有错误，应删除相关错误，因为文本输入不是空的。为什么即使没有错误，它仍然显示错误

只有javascript答案，谢谢

显示错误消息的div必须在TD内。TDs之外的任何内容都将显示在表的顶部

首先在IF条件之外写入此代码，以清除所有错误消息 newCourseIdMsgO.innerHTML=“”； newCourseNamesGo.innerHTML=“”； newDurationMsgO.innerHTML=“”

---

您的html无效。不能将元素直接放在表中（因此浏览器可能会将它们移到表外，因此问题1）。您可以使用初始隐藏的，而不是。。。关于问题2，移动三个

.innerHTML=“”行在
else
之外，在第一个
if
之前。