Question

My page is submitting straight away without checking for validation or displaying the alert. I believe the submit is firing early but is my issue that I have multiple forms?

My question is how can I get the submit to work as it should do where it checks the validation and if that is successful, display the confirmation?

I have had to post my whole code so that you can see the order of the code, because the order of the code maybe my downfall:

    <script type="text/javascript">
    $(document).ready(function () {

        $('#sessionsDrop').change(function () {

            $('#targetdiv').hide();

            if ($(this).val() !== '') {
                var text = $(this).find('option:selected').text();
                var split = text.split(' - ');
                $('#currentId').val($(this).find('option:selected').val());
                $('#currentAssessment').val(split[0]);
                $('#currentDate').val(split[1]);
                $('#currentTime').val(split[2]);
            } else {
                $('#currentAssessment,#currentDate,#currentTime,#currentId').val('');
            }
        });

    });


    function validation(e) {

        var isDataValid = true;

        var moduleTextO = document.getElementById("modulesDrop");

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

        if (moduleTextO.value == "") {
            $('#targetdiv').hide();
            $('#assessmentForm').hide();
            $('#choiceForm').hide();
            $('#submitchoicebtn').hide();
            errModuleMsgO.innerHTML = "Please Select a Module";
            isDataValid = false;
        } else {
            errModuleMsgO.innerHTML = "";
        }

        if (isDataValid === false) {
            if (e.preventDefault) {
                e.preventDefault();
                e.stopPropagation(); //VERY important
            }
            e.returnValue = false;
            e.cancelBubble = true;
        }

        return isDataValid;

    }

    function choicevalidation() {

        var isDataValid = true;

        var currentAssesO = document.getElementById("currentAssessment");

        var currentAssesMsgO = document.getElementById("currentAlert");

        currentAssesMsgO.innerHTML = "";


        if (currentAssesO.value == "") {
            $('#targetdiv').hide();
            currentAssesMsgO.innerHTML = "Please Select an Assessment to edit from the Assessment Drop Down Menu";
            isDataValid = false;
        } else {
            currentAssesMsgO.innerHTML = "";
        }
        return isDataValid;

    }

    function showConfirm() {

        var examInput = document.getElementById('curentAssessment').value;
        var dateInput = document.getElementById('currentDate').value;
        var timeInput = document.getElementById('currentTime').value;

        if (choicevalidation()) {

            var confirmMsg = confirm("Are you sure you want to take the following Assessment:" + "\n" + "Exam: " + examInput + "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);

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

    $('#choiceForm').on('submit', showConfirm);
</script>
 <h1>TAKE AN ASSESSMENT</h1> //FORM 1
<form action="assessmentchoice.php" method="post" onsubmit="return validation(event);">
    <table>
        <tr>
            <th>Module:
                <select name="modules" id="modulesDrop">
                    <option value="">Please Select</option>
                    <option value="CHI2513_Systems Strategy_1">CHI2513 - Systems Strategy</option>
                    <option value="CHT2220_Interactive Systems_4">CHT2220 - Interactive Systems</option>
                </select>
            </th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Module" name="moduleSubmit"
        />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>//FORM 2
<div id='lt-container'>
    <form action='assessmentchoice.php' method='post' id='assessmentForm'>
        <p id='warnings'></p>
        <p><strong>Selected Module:</strong> CHI2513 - Systems Strategy
            <input type='hidden'
            value='1'>
        </p>
        <p><strong>Assessments:</strong> 
            <select name="session" id="sessionsDrop">
                <option value="">Please Select</option>
                <option value='28'>LDREW - 09-01-2013 - 09:00</option>
                <option value='29'>BQNYF - 10-01-2013 - 10:00</option>
                <option value='22' disabled>WDFRK - 17-01-2013 - 09:00</option>
                <option value='26' disabled>POKUB1 - 25-01-2013 - 15:00</option>
            </select>
        </p>
    </form>
</div>
<div id='rt-container'>//FORM 3 (This is where when submitted it should show confirmation)
    <form
    id='choiceForm' action='assessment.php' method='post'>
        <p><strong>Chosen Assessment:</strong>
        </p>
        <table>
            <tr>
                <th></th>
                <td>
                    <input type='hidden' id='currentId' name='Idcurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Assessment:</th>
                <td>
                    <input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Date:</th>
                <td>
                    <input type='text' id='currentDate' name='Datecurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Start Time:</th>
                <td>
                    <input type='text' id='currentTime' name='Timecurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
        </table>
        <div id='currentAlert'></div>
        <p id='submitchoicebtn'>
            <button id='choiceSubmit'>Choose Assessment</button>
        </p>
        </form>

Answer 1

here is a DEMO

try to change following line:

function showConfirm() { /* your existing code */ }

into

function showConfirm(e) {
    e.preventDefault();

    /* your existing code */

    return false;
}

Have you already tried this:

function showConfirm(e) {
    e.preventDefault();

    var examInput = document.getElementById('curentAssessment').value;
    var dateInput = document.getElementById('currentDate').value;
    var timeInput = document.getElementById('currentTime').value;

    if (choicevalidation()) {

        return confirm("Are you sure you want to take the following Assessment:" + "\n" + "Exam: " + examInput + "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);
    }
    return false;
}

$('#choiceSubmit').on('click', function(e) {
    if (showConfirm(e)) {
        $('#choiceForm').submit();
    }
});