Javascript: onSubmit function submits form before function has finished?

Question

I'm asking this because I am at a complete loss myself and need a fresh pair of eyes.

The following JavaScript function is successfully called on submission of the connected HTML form. The function starts and the first two if statements run (and halt the submission if they return false).

Then, the first test alert "before" appears and then the form submits, completely missing out the rest of the function. While testing I changed the final line to return false so that whatever happen the function should return false, but the form still submitted.

function validateForm(form)
{
    // declare variables linked to the form
    var _isbn = auto.isbn.value;
    var _idisplay = auto.isbn.title;
    var _iref = "1234567890X";
    // call empty string function
    if (EmptyString(_isbn,_idisplay)==false) return false;
    // call check against reference function
    if (AgainstRef(_isbn,_iref,_idisplay)==false) return false;
    // call check length function
    alert("before");///test alert

    ////// FORM SUBMITS HERE?!? /////////////

    if (AutoLength(_isbn)==false) return false;
    alert("after");///test alert
    // if all conditions have been met allow the form to be submitted
    return true;
}

---

Edit: this is what AutoLength looks like:

function AutoLength(_isbn) {
    if (_isbn.length == 13) {
        return true; {
    else {
        if (_isbn.length == 10) {
            return true; {
        else {
            alert("You have not entered a valid ISBN10 or ISBN13. Please correct and try again.");
            return false;
        }
    }

Answer 1

There are errors in your implementation of AutoLength. Currently, it looks like this:

function AutoLength(_isbn) {
    if (_isbn.length == 13) {
        return true; { // <------ incorrect brace
    else {
        if (_isbn.length == 10) {
            return true; { // <------ incorrect brace
        else {
            alert("You have not entered a valid ISBN10 or ISBN13. Please correct and try again.");
            return false;
        }
    }

See how it doesn't close all of its blocks? That's because you've used the wrong brace in two places, and you've forgotten to close the function.

You could rewrite the function like this:

function AutoLength(_isbn) {
    return _isbn.length === 13  || _isbn.length === 10;
}

If you're hell-bent on using alert, you can do that inside validateForm (although I would try to find a more user-friendly way to show the error message).

In the future, when you're trying to debug code, you can use try and catch to "catch" Errors as they happen, like this:

try {
    if (false === AutoLength(_isbn)) {
        return false;
    }
} catch (e) {
    alert('AutoLength threw an error: '+e.message);
}