Javascript: How to clear validation errors if user has selected a different option in drop down menu
<p>I have a javscript validation function below:</p>

<pre><code>function editvalidation() {
    var isDataValid = true;

    var currentCourseO = document.getElementById("currentCourseNo");
    var newCourseNoO = document.getElementById("newCourseNo");
    var newCourseNameO = document.getElementById("newCourseName");
    var newCourseDurationO = document.getElementById("newDuration");
    var currentCourseMsgO = document.getElementById("currentAlert");
    var newCourseIdMsgO = document.getElementById("courseidAlert");
    var newCourseNameMsgO = document.getElementById("coursenameAlert");
    var newDurationMsgO = document.getElementById("durationAlert");

    newCourseIdMsgO.innerHTML = "";
    newCourseNameMsgO.innerHTML = "";
    newDurationMsgO.innerHTML = "";
    currentCourseMsgO.innerHTML = "";

    if (currentCourseO.value == "") {
        $('#targetdiv').hide();
        currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
        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;   
        }

        return isDataValid;
    }
}
</code></pre>

<p>Where it says <code>currentCourseO.value == ""</code>, that is stating if the drop down option value selected is "" or in other words please select. But what I also want to check is that if the user has selected another option from the drop down menu, that it clears the validation error messages. But how can I do that?</p>

<p>The drop down menu is below:</p>

<pre><code>$courseHTML = '&lt;select name="courses" id="coursesDrop"&gt;'.PHP_EOL;
$courseHTML .= '&lt;option value=""&gt;Please Select&lt;/option&gt;'.PHP_EOL;           

$courseInfo = array();

while ( $courseqrystmt-&gt;fetch() ) {
    $courseHTML .= sprintf("&lt;option value='%s'&gt;%s - %s&lt;/option&gt;", $dbCourseId,$dbCourseNo,$dbCourseName) . PHP_EOL; 

    $courseData = array();
    $courseData["CourseId"] = $dbCourseId;
    $courseData["CourseNo"] = $dbCourseNo;
    $courseData["CourseName"] = $dbCourseName;
    $courseData["Duration"] = $dbDuration;

    array_push($courseInfo, $courseData);
}

$courseHTML .= '&lt;/select&gt;';
</code></pre>

<p>UPDATE:</p>

<p>Below is the form:</p>

<pre><code>$editcourse = "
&lt;form id='updateCourseForm'&gt;

    &lt;p&gt;&lt;strong&gt;Current Course Details:&lt;/strong&gt;&lt;/p&gt;
    &lt;table&gt;
    &lt;tr&gt;
    &lt;th&gt;&lt;/th&gt;
    &lt;td&gt;&lt;input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /&gt; &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;th&gt;Course ID:&lt;/th&gt;
    &lt;td&gt;&lt;input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /&gt; &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;th&gt;Course Name:&lt;/th&gt;
    &lt;td&gt;&lt;input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /&gt; &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;th&gt;Duration (Years):&lt;/th&gt;
    &lt;td&gt;&lt;input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/&gt; &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div id='currentAlert'&gt;&lt;/div&gt;

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

    &lt;/form&gt;

    &lt;p id='submitupdatebtn'&gt;&lt;button id='updateSubmit'&gt;Update Course&lt;/button&gt;&lt;/p&gt;

";

echo $editcourse;
</code></pre>

<p>What happens is that when the submit button is clicked, I use javascript to determine if the editvalidation() function is met or not, if there are no errors then it displays confirmation, else it will display the relevant error messages from editvalidation(). I realise I actually have a change jquery function where if the drop down menu does change option, then it does something. So I am guessing that will be the key function</p>

<pre><code>function showConfirm() {
    var courseNoInput = document.getElementById('newCourseNo').value;
    var courseNameInput = document.getElementById('newCourseName').value;
    var durationInput = document.getElementById('newDuration').value;

    if (editvalidation()) {
        var confirmMsg=confirm("Are you sure you want to update the following:" + "\n" + "Course ID: " + courseNoInput +  "\n" + "Course Name: " + courseNameInput + "\n" + "Duration (Years): " + durationInput);

        if (confirmMsg==true) {
            submitform();   
        }
    }
} 

$('#coursesDrop').change(function() {
     $('#newDuration')[0].selectedIndex = this.selectedIndex;
}); 

$('body').on('click', '#updateSubmit', showConfirm); 
</code></pre>
