Javascript form validation, onblur validation and submitting

I am writing a basic form validation script, basically as we go through the form each field is checked onblur like this

            <p>
                <label>Full Name *</label>
                <input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" /> 
                <span class="formHint" id="hintFullName">Enter your full name</span>
                <span id="errorFullName"></span>
                <span class="success" id="successFullName"><img src="images/tick.png" /></span>
            </p>

This all works fine calling the function validate which I made so that you could pass it the field name and it will just check if it has been entered etc. This is all fine. Below is the validate function.

    function validate(field) {


    // Get the  value of the input field being submitted
    value = document.getElementById(field).value;

    // Set the error field tag in the html
    errorField = 'error' + field;

    // Set the success field
    successField = 'success' + field;

    if (value != '') {
        document.getElementById(successField).style.display = 'block';
        document.getElementById(errorField).style.display = 'none';
    } else {
        document.getElementById(successField).style.display = 'none';
        document.getElementById(errorField).style.display = 'block';
    }
}

Now my question is, after validating on the fly using the onblur what is the best way for me to proceed when submitting? Do I need to write another function to manually check all of the form fields or is there a better way.

I have been thinking about it for a while but I cant seem to think the best way to check once submitted.

Sorry if any of this doesn't make sense, been confusing myself for a few hours now.

Many thanks in advance.

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!