Javascript: How to clear validation errors if user has selected a different option in drop down menu

Question

I have a javscript validation function below:

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

Where it says currentCourseO.value == "", 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?

The drop down menu is below:

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

$courseInfo = array();

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

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

    array_push($courseInfo, $courseData);
}

$courseHTML .= '</select>';

UPDATE:

Below is the form:

$editcourse = "
<form id='updateCourseForm'>

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

    <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='' />
    <div id='courseidAlert'></div>
    </td>
    </tr>
    <tr>
    <th>Course Name:</th> 
    <td><input type='text' id='newCourseName' name='CourseNameNew' value='' /> 
    <div id='coursenameAlert'></div>
    </td>
    </tr>
    <tr>
    <th>Duration (Years):</th> 
    <td id='data'>{$durationHTML}
    <div id='durationAlert'></div></td>
    </tr>
    </table>

    </form>

    <p id='submitupdatebtn'><button id='updateSubmit'>Update Course</button></p>

";

echo $editcourse;

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

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

@jbabey I have updated question to included form code and other jquery code to show how validation function is met and also I have a piece of jquery code where it controls option drop down change — user1881090
on a side note, is there any particular reason you put all of your HTML in a php file instead of just an html page? — jbabey
@jbabey Because I don't want the whole form to appear until after the submit. I actually saw a tutorial on somebady making a registration form and that person put the html in php — user1881090

Rick Calder Rick Calder · Accepted Answer · 2012-12-09T13:44:36

$("#currentCourseNo").change(function(){
    if($("#currencCourseNo").val()!="")
    {
        $("#currentAlert").html("");
    } else {
        $("#currentAlert").html("error message here");
    }
});

You're using jQuery anyway, just do it with the onchange events of your form elements and display/hide the errors dynamically. There is really no need to wait for the submit function in this case.

Javascript: How to clear validation errors if user has selected a different option in drop down menu

1 Answers