Validation stuck at first validation

I'm new to JavaScript and my form validation works but keeps jumping to validate username on submit even when its validated. Heres my code

function validate_form(form)
{
   var complete=false;

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

    if(complete)
    {
        clear_all();
        complete = checkaddress(form.country.value);
    }

    if(complete)    
{
    clear_all();
    complete = checkaddress(form.country.value);
}

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

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

function clear_all()
{
    document.getElementById('usernamehint').style.visibility= 'hidden';
    /*.basicform.usernamehint.style.backgroundColor='white';*/

    document.getElementById("countrthint").style.visibility= 'hidden';
    /*document.basicform.countrthint.style.backgroundColor='white';*/

    document.getElementById("subhint").style.visibility= 'hidden';
    /*document.basicform.subject.style.backgroundColor='white';*/

    document.getElementById("phonehint").style.visibility= 'hidden';
    /*document.basicform.phone.style.backgroundColor='white';*/

  开发者_如何转开发  document.getElementById("emailhint").style.visibility= 'hidden';
    /*document.basicform.email.style.backgroundColor='white';*/
}

 heres the functions 

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

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";
    }
  }
}
addLoadEvent(prepareInputsForHints);

 and heres my form 

       <form form method="post" action="mailto:s00103684@mail.itsligo.ie"  name="basicform" id="basicform" > 

                 <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="subject" onkeyup="checkaddress(this);" /> 
                        <span class="hint" id="subhint">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" id="phonehint">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" id="emailhint">You can enter your real address without worry - we don't spam!</span> 
                    </fieldset> 


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

Please point amateur coder in right direction Thanks

Like others said, you are trying to access the username inside a condition, where the condition is always false. You set complete=false on start and right after that you try to see if that is true.

By the way, clear_all() may not have the behavior you want before the first validation. It will hide every input in the screen, so if there is anything else wrong, you won't be able to see that. I should go for hiding at the end (or at the beginning like @mplungjan stated, and always depending on what you need), maybe reusing your if(complete) structure:

function validate_form(form)
{
    clear_all();
    var complete = checkUsernameForLength(form.username.value);

    if(complete)
    {
        complete = checkaddress(form.country.value);
    }

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

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

Also, and after stating the username validation works, you should return a boolean value in the other methods =)

EDIT: Also, checking the errors the others said is a high priority issue.

EDIT2: I turned to see a repeated condition. Now I deleted it. To keep using the if(complete) that way, you should also do these changes:

function checkaddress(whatYouTyped)
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length <10)
    {
        fieldset.className = "welldone";
        return true; // <-- this change
    }
     else
    {
        fieldset.className = "";
        return false; // <-- and this change
    }
}

Also, change the other methods to return true and false when you need.

Don't panic.

Everyone has to start somewhere and it can be very frustrating when you're only just learning the ropes.

In answering this question, we need to look not only at your JavaScript, but at the HTML as well.

You don't have a submit input type; instead opting for a regular button. That wouldn't necessarily be a problem, except nowhere in your JavaScript are you actually submitting your form. That means every time someone clicks the "Send" button, it will fire the validate_form() function you've defined but do nothing further with it. Let's make a couple of changes:

Replace your button with a submit input:

<input value="send" type="submit" />

Next, add the following code to your form tag so that we define an action to take when the user tries to submit your form:

onsubmit="validate_form(this)"

So your whole form tag now looks like this:

<form method="post" action="mailto:s00103684@mail.itsligo.ie"  name="basicform" id="basicform" onsubmit="return validate_form(this)"> 

Notice I removed an extra "form" from that element.

Ok, next we want to handle what happens when the form is ready to be validated.

function validate_form(form)
{
      // ...we can step through each item by name and validate its value.
      var username = checkUsernameForLength(form["username"].value);
      var email = checkaddress(form["country"].value);

      // ...and so on.
      return (username && email && {my other return values});
}

Each method you call (e.g. CheckUsernameForLength) should return either true or false, depending on whether the input is valid or not.

Our last return is probably a little inelegant, but is a verbose example of a way to aggregate our returned values and see if there are any "failed" values in there. If all your methods returned true, that last return will evaluate to true. Otherwise (obviously) it will return false.

The submission of the form will depend on whatever value is returned from your validate_form() function.

Please start with this ( http://jsfiddle.net/4aynr/4/ )

function validate_form(form)
{
   var complete=false;
   clear_all();
   complete = checkUsernameForLength(form.username); // pass the FIELD here

    if(complete)
    {
        complete = checkaddress(form.country.value);
    }

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

    if (complete)
    {
        complete = checkphone(form.phone.value);
    }
    if (!complete) alert('something went wrong')

    return complete;
}   

and change

<form form method="post" action="mailto:s00103684@mail.itsligo.ie"  
name="basicform" id="basicform" > 

to

<form method="post" action="mailto:s00103684@mail.itsligo.ie"  
name="basicform" id="basicform" 
onSubmit="return validate_form(this)"> 

and change

 <input value="send" type="button" onclick="validate_form(this.form)"/>

to

 <input value="send" type="submit" />