執行JavaScript驗證後，表單方法將無法運行

我一直試圖讓我的頭在這附近 - 我創建了一個表單並使用JavaScript來驗證提交輸入。執行JavaScript驗證後，表單方法將無法運行

如果驗證通過，for有一個運行方法;方法= 「POST」。 JavaScript似乎阻止了該方法的運行。

任何幫助將非常感激，我使用的代碼如下：

<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 = /^[^@][email protected][^@.]+\.[^@]*\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="" /></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>

來源

2011-09-08 Alex

哪個方法被阻止？「validateForm」或其他？ – wasimbhalli

從我第一次看，reason是永遠不會被""因爲你一直在增加的<br />標籤最後不管輸入是空的。

來源

2011-09-08 13:15:29

在您的驗證方法中，您的原因變量永遠不會爲空。你一直在分配至少你的「
」 - 字符串。所以在最後，它總是返回false，因此表單從不提交。

您可以通過將驗證結果保存到數組來避開此情況。

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

.... 

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

那麼你的結果將是你的理由由換行符分隔;或者如果沒有找到任何理由，它將是「」。

來源

2011-09-08 13:19:49

執行JavaScript驗證後，表單方法將無法運行

回答

相關問題