PHP Form Submits Before Javascript Validation

Question

I'm having a somewhat common problem of getting my form to validate before submission. I've tried several variations on the same theme and with no dice: at best I could get nothing to submit, but usually my form just ignores codes and submits anyway.

Chances are I'm missing something small but I'd appreciate any help! Essentially just trying to make sure the name isn't empty here (return true; is pointless IIRC but I was getting desperate haha). Once I can get some basic level of validation down it just comes down to coding the JS for more complicated maneuvers so this should be good enough, i hope. Thanks!

<script>
function validateForm() {
    var x = document.forms["savegameform"]["username"].value;
    if (x == null || x == "") {
        document.getElementByID("JSError").innerHTML = "Error: Please enter a name."; 
        return false;
    } else {
    return true;
    }

    alert("Bla");
}
</script>

<form name="savegameform" method="post" action="submitsave.php" onSubmit="return validateForm(); return false;"><p>
<span class="formline">Name: </span><input type="text" name="username" size="25"><br />
//More of the form
<input type="submit" name="submit" value="Submit">

<span id="JSError">Test.</span>

    </p></form>

Answer 1

1st solution - using input[type=submit]

<!-- HTML -->
<input type="submit" name="submit" value="Submit" onclick="return validateForm();" />

// JavaScript
function validateForm(){
    var target = document.getElementById("name"); // for instance
    if(target.value.length === 0){ 
        alert("Name is required");
        return false;
    }
    // all right; submit the form
    return true;
}

2nd solution - using input[type=button]

<!-- html -->
<input type="button" name="submit" id="submit" value="Submit" />

// JavaScript
window.onload = function(){
    var target = document.getElementById("name");
    document.getElementById("submit").onclick = function(){    
        if(target.value.length === 0){ 
            alert("Name is required");
        }else{
            // all right; submit the form
            form.submit();
        }
    };
};

Answer 2

You're making it to complex.

JavaScript:

function validateForm() {
    var x = document.forms["savegameform"]["username"].value;
    if (x == null || x == "") {
        document.getElementByID("JSError").innerHTML = "Error: Please enter a name."; 
        return false;
    } else { return true; }
}

HTML:

<form name="savegameform" method="post" action="submitsave.php" onSubmit="return validateForm()"><p>
<span class="formline">Name: </span><input type="text" name="username" size="25"><br />
//More of the form
<input type="submit" name="submit" value="Submit">

<span id="JSError">Test.</span>

    </p></form>

Answer 3

Your validation works fine, but because you are trying to

document.getElementByID("JSError").innerHTML

instead of

document.getElementById("JSError").innerHTML

JS throws an error and never reaches your "return false". You can easily see this, when you use your browsers console output. (In firefox and chrome press F12).

Example fiddle: http://jsfiddle.net/6tFcw/