Question

下面我有一个表和一个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>

使用Javascript：

  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;

        }
    }

上述验证有2个问题。

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

问题2：

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

只有javascript答案，谢谢

Answer 1

显示错误消息的DIV必须在TD内。 TD之外的任何内容都将显示在表格的顶部。
首先在IF条件之外编写此代码，以清除所有错误消息 newCourseIdMsgO.innerHTML =“”; newCourseNameMsgO.innerHTML =“”; newDurationMsgO.innerHTML =“”

JAvascript验证功能不正常

1 个答案: