call all functions to submit form

I'm new to JavaScript and am looking on how to validate my form on button click, but my script keeps jumping to the first function validate Name an stays highlighted, I don't know what to put in the clear all function so it jumps to the next non validated item

function validate_form(form)
{
    var complete=false;

    if(complete)
    {
        clear_all();
        complete = checkUsernameForLength(form.username.value);
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }

    if (complete)
    {
        clear_all();
        complete = checkphone(form.phone.value);
    }
    if (complete)
    {
        clear_all();
        complete = checkEmail(email.phone.value);
    }
}

function clear_all()
{
    document.getElementById('usernamehint').style.visibility= 'hidden';
    document.basicform.username.style.backgroundColor='white';
    document.getElementById("countryhint").style.visibility= 'hidden';
    document.basicform.country.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicformm.address.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicform.phone.style.backgroundColor='white';
    document.getElementById("").style.visibility= 'hidden';
    document.basicform.email.style.backgroundColor='white';
}

function checkUsernameForLength(whatYouTyped)
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "";
        return false;
    }
}

function checkEmail(whatYouTyped) 
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}



function checkaddress(whatYouTyped)
 {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length <10) {
        fieldset.className = "welldone";
    }
     else {
        fieldset.className = "";
    }
}



function checkphone(whatYouTyped)
 {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
 if ( /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/.test(txt)) {
        fieldset.className = "welldone";
    }
 else
 {
        fieldset.className = "";
    }
}



function addLoadEvent(func) 
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function') 
{
    window.onload = func;
  }
 else
 {
    window.onload = function()
 {
      oldonload();
      func();
    }
  }
}


function prepareInputsForHints() 
{
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++)
{
  开发者_开发技巧  inputs[i].onfocus = function () 
{
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () 
{
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}

function checkUsernameForLength(name, callback) {
    if (error) {
        return [null, error];
    }
    return [name, null]
}
var series = function(funcs, success, error) {
    var results = errors = [];
    for (var i in funcs) {
        var result = funcs[i]();
        results.push(result[0]);
        errors.push(result[1]);
        if (result[1]) {
            return error(results, errors);
        }
    }
    return success(results);
}
series([
    function() {
        return checkUsernameForLength(form.username.value);
    }
], function(results) {
    form.submit();
}, function(results, errors) {
    alert(errors.join("\n"));
});

series call each validation function and stop execution if some error passed. Than calls errors or success function if is or not errors.

PS. It's right way to learn javascript. You shouldn't use any sugars like jQuery if you want to know javascript well.

May I recommend the following methodology:

You have a list of validator functions, of the form

{ // map of ids : validators
    name: function(formElement) {..., return 'Cannot be all lowercase' or return 'Other error'}, 
    email: function(formElement) {...}, 
    ...
}

Each validator function returns an error message, or nothing (undefined) if there was no problem.

Then using $.each over id:validator pairs, you do something like (code is probably buggy):

$(id).bind(
    'change', //?
    function () {
        // Called when user changes form elements, you can use an alert, or better
        // something not annoying like...
        $(id).css({'background-color':'yellow'})
        $(id+'-error').get(0).innerHtml = validator(id);
    }
)

This method has the advantage that it the user will see all errors at once, rather than one-at-a-time.

Alternatively, every time the user hits submit, you then do something like a $.map or $.each to run all the validator functions, and complain appropriately.

Also note that you cannot depend on client-side code to validate your forms, since it is trivial for a user or hacker to disable or ignore your validation code and send whatever values they'd like to your server. However, client-side validation code is very useful for a smooth and responsive user experience.

I reviewed your code and got the main issue of your code: Here is a part of validation:

    complete = checkUsernameForLength(form.username.value);
}
if(complete)

……

function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
    }
    else {
        fieldset.className = "fail";
    }
}

The issue is that checkUsernameForLength doesn't return the value, so complete doesn't have value. You should change your function code to:

function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "fail";
        return false;
    }
}

In this case

complete = checkUsernameForLength(form.username.value);

Will have true or false value if no errors or some error. And it will stop execution of validation