Question

I have a form that is validating one field. The alert box appears on an error and the divs change, but the page continues to submit. I need help figuring out why it is still continuing on.

Javascript:

function validateFormOnSubmit(theForm) {
    var reason = '';

    reason += validateName(theForm.signature_name);

    if (reason != '') {
        document.getElementById('error').innerHTML = "<p>* All fields are required.<br><span style='color:red'><strong><u>Some fields need correction:</u></strong></span></p>" // + reason;    
        //alert("Some fields need correction:\n" + reason);
        return false;
    }
    return true;
}

function validateName(fld) {
    var error = '';
    var illegalChars = /\W\s/; // allow letters, numbers, and underscores

    if (fld.value == '') {
        error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The required field has not been filled in.";
        alert("Do Not Continue");
    } else if ((fld.value.length < 2) || (fld.value.length > 15)) {
        error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The name is not long enough.";
        alert("Do Not Continue");
    } else if (illegalChars.test(fld.value)) {
        error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The name field contains illegal characters.";
        alert("Do Not Continue");
    }
    return error;
}

HTML

<form enctype='multipart/form-data' name='finishJob' id='finishJob' action='finishJob.php' method='POST' onsubmit='return validateFormOnSubmit(this)'>
    <table width='95%' class='tablebox'>
        <tr><td name='error'></td><td><h2>Upload Signature:</h2></br><input name='uploadedfile' id='uploadedfile' type='file' /></td><td><h2 id='client_name'>Client's Last Name:</h2></br><input type='text' id='signature_name' name='signature_name'></td><td><input type='submit' value='Complete Job' class='link-button'></td></tr>
    </table>
</form>

Answer 1

So I ran the code through jsbeautifier It shows a random 0 in your code. Also look at your error messages. You copied the same error on every line. You have no opening <p> tag.

The reason the form is submitting is probably because of a JS error somewhere in your code. Enable the debugger on your JavaScript console. Go to console and type in

validateFormOnSubmit(document.getElementById("finishJob"));

Do errors appear in the console?

And when you do that you will see a null error. Why? because you have a name and not an id.

document.getElementById('error').innerHTML <--I am looking for an id
<td name='error'>  <-- I am not an id!