Form method won't run after performing JavaScript validation

I've been trying to get my head around this for days - I have created a form and used JavaScript to validate inputs on submit.

The for has a method to run if the validation is passed; method="POST". It seems that JavaScript is blocking the method from running.

Any help on this will be much appreciated, the code I've used is as follows:

 <script type="text/javascript">
function validateForm(theForm) {
var reason = "";
reason += validateUsername(theForm.username)+'<br/>';
reason += validatePassword(theForm.pwd)+'<br/>';
reason += validateEmail(theForm.email)+'<br/>';
reason += validatePhone(theForm.phone)+'<br/>';
reason += validateEmpty(theForm.from)+'<br/>';
reason += validateEmpty(theForm.firstname)+'<br/>';
reason += validateEmpty(theForm.lastname)+'<br/>';
reason += validateEmpty(theForm.address1)+'<br/>';
reason += validateEmpty(theForm.address2)+'<br/>';
reason += validateEmpty(theForm.city)+'<br/>';
reason += validateEmpty(theForm.postcode)+'<br/>';
reason += validateEmpty(theForm.daytelephone)+'<br/>';
reason += validateEmpty(theForm.eveningtelephone)+'<br/>';
reason += validateEmpty(theForm.contact)+'<br/>';
reason += validateEmpty(theForm.verifycontact)+'<br/>';
reason += validateEmpty(theForm.coverletter)+'<br/>';
reason += validateEmpty(theForm.cv_file)+'<br/>';
reason += validateEmpty(theForm.resume);
if (reason != "") {
document.getElementById('box1').style.visibility= 'visible';
document.getElementById('box1').innerHTML = reason ;
return false;
}
return true; 
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a username.\n";
} else if ((fld.value.length < 5) || (fld.value.length > 15)) {
fld.style.background = 'Yellow';
error = "The username is the wrong length.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The username contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validatePassword(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a password.\n";
} else if ((fld.value.length < 7) || (fld.value.length > 15)) {
error = "The password is the wrong length. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one numeral.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}
function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (fld.value == "") {
error = "You didn't enter a phone number.\n";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 10)) {
error = "The phone number is the wrong length. Make sure you included an area code.\n";
fld.style.background = 'Yellow';
}
return error;
}
</script>
<form action="index2.php" onsubmit="return validateForm(adminForm);" method="POST"  name="adminForm" enctype="multipart/form-data" >
<input type="hidden" name="id" value="{mxtvalue=id}" />
<input type="hidden" name="option" value="{mxtvalue=option}" />
<input type="hidden" name="Itemid" value="{mxtvalue=Itemid}" />
<input type="hidden" name="task" value="send" />
<table >
<tbody>
<tr>
<td><label for="username">Your user name:</label></td>
<td><input name="username" type="text" class="inputbox" size="40" value="" /><开发者_如何学C/td>
</tr>
<tr>
<td><label for="pwd">Your password</label></td>
<td><input name="pwd" size="35" maxlength="25" type="password"></td>
</tr>
<tr>
<td><label for="email">Your email:</label></td>
<td><input name="email" size="35" maxlength="30" type="text"></td>
</tr>
<tr>
<td><label for="phone">Your telephone number:</label></td>
<td><input name="phone" size="35" maxlength="25" type="text"></td>
</tr>
<tr>
<td>
<label for="from">Where are you :</label></td>
<td><input name="from" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_FIRSTNAME}</b></td>
<td><input type="text" name="firstname" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_LASTNAME}</b></td>
<td><input type="text" name="lastname" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_ADDRESS1}</b></td>
<td><input type="text" name="address1" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_ADDRESS2}</b></td>
<td><input type="text" name="address2" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_CITY}</b></td>
<td><input type="text" name="city" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_ZIPCODE}</b></td>
<td><input type="text" name="postcode" class="postcode" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_DAYTELEPHONE}</b></td>
<td><input type="text" name="daytelephone" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_EVENINGTELEPHONE}</b></td>
<td><input type="text" name="eveningtelephone" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_APPLICANTEMAIL}</b></td>
<td><input type="text" name="contact" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td><b>{mxtlang=_JL_APPLICANTEMAIL}</b></td>
<td><input type="text" name="verifycontact" class="inputbox" size="40" value="" /></td>
</tr>
<tr>
<td valign="top"><b>{mxtlang=_JL_COVER_LETTER}</b></td>
<td>
   <textarea class="inputbox" name="coverletter" id="coverletter" cols="50" rows="10"></textarea>
   <br />{mxtlang=_JL_CV_FILE}<input type="file" class="inputbox" name="cv_file" id="cv_file" />
</td>
</tr>
<tr>
<td valign="top"><b>{mxtlang=_JL_RESUME}</b></td>
<td><textarea class="inputbox" name="resume" id="resume" cols="50" rows="10"></textarea></td>
</tr>
</table>
<table>
<tr>
<td>All</td>
  <td>Morning</td>
  <td>Afternoon</td>
  <td>Evening</td>
</tr>
<tr>
  <td>Mon</td>
  <td><input type="checkbox" name="monmorning" value="Mon-Morning" /></td>
  <td><input type="checkbox" name="monafternoon" value="Mon-Afternoon" /></td>
  <td><input type="checkbox" name="monevening" value="Mon-Evening" /></td>
</tr>
<tr>
  <td>Tue</td>
  <td><input type="checkbox" name="tuemorning" value="Tue-Morning" /></td>
  <td><input type="checkbox" name="tueafternoon" value="Tue-Afternoon" /></td>
  <td><input type="checkbox" name="tueevening" value="Tue-Evening" /></td>
</tr>
<tr>
  <td>Wed</td>
  <td><input type="checkbox" name="wedmorning" value="Wed-Morning" /></td>
  <td><input type="checkbox" name="wedafternoon" value="Wed-Afternoon" /></td>
  <td><input type="checkbox" name="wedevening" value="Wed-Evening" /></td>
</tr>
<tr>
  <td>Thu</td>
  <td><input type="checkbox" name="thumorning" value="Thu-Morning" /></td>
  <td><input type="checkbox" name="thuafternoon" value="Thu-Afternoon" /></td>
  <td><input type="checkbox" name="thuevening" value="Thu-Evening" /></td>
</tr>
<tr>
  <td>Fri</td>
  <td><input type="checkbox" name="frimorning" value="Fri-Morning" /></td>
  <td><input type="checkbox" name="friafternoon" value="Fri-Afternoon" /></td>
  <td><input type="checkbox" name="frievening" value="Fri-Evening" /></td>
</tr>
<tr>
<td>Sat</td>
  <td><input type="checkbox" name="satmorning" value="Sat-Morning" /></td>
  <td><input type="checkbox" name="satafternoon" value="Sat-Afternoon" /></td>
  <td><input type="checkbox" name="satevening" value="Sat-Evening" /></td>
</tr>
<tr>
  <td>Sun</td>
  <td><input type="checkbox" name="sunmorning" value="Sun-Morning" /></td>
  <td><input type="checkbox" name="sunafternoon" value="Sun-Afternoon" /></td>
  <td><input type="checkbox" name="sunevening" value="Sun-Evening" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="sendbtn" class="button" value="{mxtlang=_JL_SEND_APPLICATION}" /></td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</form>
<div style="visibility:hidden" id="box1">
</div>

From my first look, reason is never going to be "" as you are always adding the <br /> tag at the end no matter if the input is empty.

in your validation Method, your reason variable is never empty. You are alway assigning at least your "
" - strings to it. So at the end, it always returns false, thus the form is never submitting.

You could circumvent this by saving your validationresults to an array.

var reasons = [];
reasons.push(validateUsername(theForm.username);

....

var result = reasons.join("<br/>");

then your result will be your reasons seperated by a line break; or it will be "" if no reasons are found.