Question

Below I have a table and a javascript validation function:

HTML Table:

<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;

        }
    }

I have 2 problems with the above validation.

Problem 1: It is not displaying the errors below the relevant form features, the errors are being displayed above the form. It should be like if the user has not entered in a courseid then the error should be displayed below the course id text input for example.

Problem 2:

If I leave the form/table blank then all the errors are displayed, but then if I fill in one of the text inputs for example and resubmit, it still displays all the errors, it should of removed the releavnt error as the text input is not empty. Why is it still displaying the errors even though there is no error?

Only javascript answers please thanks

Answer 1

1. Your DIVs to display error messages must be within the TD. Anything outside TDs will be displayed on top of the table.

2. Clear all your error messages by first writing this code outside the IF conditions
   newCourseIdMsgO.innerHTML = “”;
   newCourseNameMsgO.innerHTML = “”;
   newDurationMsgO.innerHTML = “”