Form will not validate

My form won't validate, all my functions when called with the submit button

//This is the main function 
function validate_form(form) {
    var complete = false;

    //  Ensure that only one error message is diaplayed at a time
    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);
    }

}

//Clear all red areas


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';

}

// This function checks if the username field
// is at least 6 characters long.
// If so, it attaches class="welldone" to the 
// containing fieldset.


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;
    }
}




// This function checks the email address to be sure
// it follows a certain pattern:
// If so, it assigns class="welldone" to the containing
// fieldset.

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 = "";
    }
}

// If the address is at least 4 characters long, the containing 
// fieldset is assigned class="kindagood".

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 = "";
    }
}

// this part is for the form field hints to display
// only on the condition that the text input has focus.
// otherwise, it stays hidden.

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.getEleme开发者_开发问答ntsByTagName("span")[0].style.display = "inline";

        }

        inputs[i].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
    }
}
addLoadEvent(prepareInputsForHints);     

Here's my form:

   <form action="#" name="basicform"  id="basicform"  onsubmit="return validate_form()" method="post" > 

                                    <fieldset> 
                                        <label for="username">Name:</label> 
                                        <input type="text"id="username" onkeyup="checkUsernameForLength(this);" /> 
                                      <span class="hint" id="usernamehint">This Field Must Not Be Left Blank !</span> 
                                    </fieldset> 

                                     <fieldset> 
                                        <label for="country">Country:</label> 
                                        <input
                                            type="text"
                                            id="country"
                                            onkeyup="checkaddress(this);" /> 
                                        <span class="hint" id="countryhint">This Field Must Not Be Left Blank !</span> 
                                    </fieldset> 


                 <fieldset> 
                    <label for="Subject">Subject:</label> 
                    <input
                        type="text"
                        id="country"
                        onkeyup="checkaddress(this);" /> 
                    <span class="hint">Please Indicate What Your Interest Is !</span> 
                </fieldset> 



                 <fieldset> 
                    <label for="Phone">Phone:</label> 
                    <input
                        type="text"
                        id="Phone"
                        onkeyup="checkphone(this);" /> 
                    <span class="hint">This Feld Must Be Numeric Values Only !</span> 
                </fieldset> 

                <fieldset> 
                    <label for="email">Email Address:</label> 
                    <input
                        type="text"
                        id="email"
                        onkeyup="checkEmail(this);" /> 
                    <span class="hint">You can enter your real address without worry - we don't spam!</span> 
                </fieldset> 


                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="send" class="gray" type="button" onclick="validate_form(this.form)"/>
                  <br /><br /> <br /><br />   
                </form> 

Here's a link to it http://jsfiddle.net/j5fMq/

The issue is that validate_form() starts with

var complete = false;

and then every other block in the method starts with

if (complete) {...

Since complete starts with being false, none of those blocks will run!

Error: Uncaught reference validate_form() not defined

remove the onclick from the button. the onsubmit event of the form will do the job for you.

Your valide_form function will never do anything, because you set complete = false;

When you are going for boolean validation (checking true or false) you define the boolean object in the javascript as shown below :

var myBoolean=new Boolean();

myBoolean = true;

from your javascript snippet I assume you check the condition only if condition is true so if the first condition needs to be checked then the boolean object is initialized to true in the beginning. If it returns true then next condition would be checked otherwise would show the error message.I assume this is the flow you have in mind.

P.s : Also you can add Alert(); messages in the javascript initially to study the flow of the code which helps in troubleshooting during the initial stages.

Hope it solves the issue.

Regards, Rajeev