-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: 関連するフォーム機能の下にエラーが表示されず、フォームの上にエラーが表示されます。ユーザーがコースIDを入力していない場合、たとえばコースIDテキスト入力の下にエラーが表示されるはずです。

問題 2:

フォーム/テーブルを空白のままにすると、すべてのエラーが表示されますが、たとえば、テキスト入力の 1 つを入力して再送信すると、すべてのエラーが表示されます。テキスト入力は関連するエラーを削除する必要があります。空ではない。エラーがないのにエラーが表示されるのはなぜですか?

JavaScriptの回答のみお願いします

4

1 に答える 1

0

  1. エラーメッセージを表示するDIVは、TD内にある必要があります。TDの外側にあるものはすべてテーブルの上に表示されます。

  2. 最初にこのコードをIF条件の外に記述して、すべてのエラーメッセージをクリアします。newCourseIdMsgO.innerHTML= ""; newCourseNameMsgO.innerHTML = ""; newDurationMsgO.innerHTML = ""

于 2012-12-09T09:42:09.487 に答える