both validation messages are appearing on javascript and php

Question

In the code below I have two types of validation. I use a javascript validaton which displays the error message for when the user does not enter in anything in the course text input.

Then I have a php validation where that if it does not contain a row for the result from the query which checks to see if there are any assessments within the course the user has typed in the course text input, then it displays a message stating that no assessments are found.

The problem I am having though is that if the user does not enter in anything in the "Course" text input and they click on the submit button, it displays both the javascript validation and the php validation.

This is incorrect, what should happen is that :

• if the user has not written anything in the course text input, then it should simply show only the javascript validation and NOT the php validation.

  • if the user has written something in the course text input and submits the form, but it then cannot find any results from the query, then it should display the php validation ONLY.

My question is what do I need to change in the code in order to be able to not show both validation messages at the same time and show only the correct validation messages when they should be shown?

In other words how do I stop the form from submitting if the javascript validation fails? And then obviously how do I make sure that if the javascript validation succeeds, then it does submit the form.

Javascript

function validation() {

    var isDataValid = true;

    var courseTextO = document.getElementById("coursesDrop");

    var errModuleMsgO = document.getElementById("moduleAlert");

    if (courseTextO.value == "") {
        $('#targetdiv').hide();
        $('#assessmentForm').hide();
        $('#updateForm').hide();
        $('#submitupdatebtn').hide();
        errModuleMsgO.innerHTML = "Please Select a Course";
        isDataValid = false;
    } else {
        errModuleMsgO.innerHTML = "";
    }
    return isDataValid;

}​

PHP/HTML

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<input type="text" name="courses" id="coursesDrop" />' . PHP_EOL; 

?>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>


<?php

if (isset($_POST['moduleSubmit'])) {    

    $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";

    $active = 1;

    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)

    $sessionqrystmt->execute(); 

    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {
        echo "<p><span style='color: red'>Sorry, You have No Assessments under this Module</span></p>";
    } 
    else 
    { 
        echo "";
    }

    ...

}
?>

Answer 1

Try stopping the submit event thoroughly (you're suffering from jQuery-itis, causing you to abuse return false):

method="post" onsubmit="return validation(event);">

And in JS:

function validation(e)
{
    //your checks
    if (isDataValid === false)
    {
        if (e.preventDefault)
        {
            e.preventDefault();
            e.stopPropagation();//VERY important
        }
        e.returnValue = false;
        e.cancelBubble = true;
    }
    return isDataValid;
}

To find out what both methods do, have a look at what MDN has to say
To find out what you're stopping when calling stopPropagation (or setting cancelBubble to true) I'd recommend quirksmode: events order very easy to follow, reasonably comprehensive description, and, in case you need it: their introduction to JS events, too.

Update
In response to your comments:

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<input type="text" name="courses" id="coursesDrop" />' . PHP_EOL; 
$pHTML = '&nbsp;';//default paragraph inner
if (isset($_POST['moduleSubmit'])) {    
        $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";
    $active = 1;
    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)
    $sessionqrystmt->execute(); 
    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {//error msg?
        $pHTML =  "<span style='color: red'>Sorry, You have No Assessments under this Module</span>";
    } 
}

?>
    <p id="warnings"><?php echo $pHTML;?></p><!-- echo the innerHTML created server-side -->
<form id="myForm" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation(event);">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>

Tweaked JS - since you're using jQuery, I'll use that as delegating a change event in IE is a pain:

$('#myForm').delegate('change','select',function()
{
    $('#warnings').html('');//clears current warnings
});

Or, a more efficient but somewhat more complex take:

$('#myForm').delegate('change','select',(function(warnings)
{
    return function()
    {
        warnings.html('');
    };
}($('#warnings'))));

Don't forget to wrap this in a $(document).ready(function(){[here]});

Answer 2

I believe action and onsubmit will both fire, even if there is a return false in the onsubmit function. I suggest removing the action and moving the form POST to a Javascript function, to be called upon successful front end validation.

Answer 3

I think it is because you are missing .value

var courseTextO = document.getElementById("coursesDrop").value;
// add line of debug
alert(courseText0);

Answer 4

It must return both, because your action is to call the php validation and you have also a onsubmit that calls the javascript validation.

What happens is, that your code executes at first the javascript and then the php.

The best way to solve your problem is setting no action at all in the from-tag and setting the action of the form in your javascript validation function depending on the outcome.