Ah, validation!

Yep, you'll need to manually check. How manually will differ. It could be straight, brute manual like this:

function handleOnSubmit(e) {

    validate('FullName');

    validate('ZipCode');

    validate('City');



    // Loop through all error fields and see if any are present

}

Not very efficient, as you know...

Instead, let's write a loop that does it!

But before that, I'd recommend updating your validate function to return true/false if an error is/isn't present.

Something like:

if (value != '') {

    document.getElementById(successField).style.display = 'block';

    document.getElementById(errorField).style.display = 'none';

    return true;

} else {

    document.getElementById(successField).style.display = 'none';

    document.getElementById(errorField).style.display = 'block';

    return false;

}

Alright!

Now we can create a parent validator which can call your validate function with all the form elements.

Something like:

function handleOnSubmit(e) {

    // Query your elements some how

    var inputs = document.forms[0].getElementsByTagName('input');



    // Loop your elements

    for (i = 0, len = inputs.length; i < len; i++) {

        if( validate(inputs[i].id) === false) {

            // Error occurred - we'll prevent the form submission

            e.preventDefault();

        }

    }

}

Here's a JSFiddle for demo: http://jsfiddle.net/ww2grozz/

The other way (if you prefer not running the validation multiple again on already validated elements) is to maintain a state of validated objects. You could then check against those.

Something like this:

var validated = {};



function validate(field) {

    // Existing logic



    if (value != '') {

        validated[field] = true;

    } else {

        validated[field] = false;

    }

}

Then, going back to the above parent validator:

function handleOnSubmit(e) {

    // Query your elements

    var inputs = document.forms[0].getElementsByTagName('input');



    // Loop your elements

    for (i = 0, len = inputs.length; i < len; i++) {

        var name = inputs[i].id;



        if (!validated[name]) {

            // Prevents submission

            e.preventDefault();



            // Call validate

            validate(name);

        }

    }

}

A second fiddle: http://jsfiddle.net/ww2grozz/2/

Finally, if this is going to a server...don't forget server side validation!