-1

下面我有一个表格和一个 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，则错误应该显示在 course id 文本输入下方。

问题2：

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

只有javascript答案，谢谢

4

1 回答 1

0

  1. 显示错误消息的 DIV 必须在 TD 内。TD 之外的任何内容都将显示在表格顶部。

  2. 首先在 IF 条件之外编写此代码来清除所有错误消息 newCourseIdMsgO.innerHTML = ""; newCourseNameMsgO.innerHTML = ""; newDurationMsgO.innerHTML = ""

于 2012-12-09T09:42:09.487 回答