javascript - 执行 JavaScript 验证后,表单方法不会运行

标签 javascript forms

几天来我一直在努力解决这个问题 - 我创建了一个表单并使用 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 = /^[^@]+@[^@.]+\.[^@]*\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>

最佳答案

从我的第一眼看来,reason永远不会是""因为您总是添加 <br />无论输入是否为空,都在末尾添加标签。

关于javascript - 执行 JavaScript 验证后,表单方法不会运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7348609/

相关文章:

javascript - 为什么 Chrome 会阻止我在网站上的滑动尝试?

javascript - 加载 CSS 未 100% 工作

javascript - 函数引用~请指教!

python 发送带有多个同名参数的http请求

javascript - 单击带有 javascript 的提交按钮

regex - HTML5 模式 - 不允许以下字符

javascript - 在 HTML 的 &lt;script&gt; src 属性中传递 Javascript 全局变量

javascript - Chrome 22 混淆了平板电脑和台式机

javascript - 如何在输入名称中使用特殊字符访问 javascript 中的表单输入值?

java - 如何在没有名称的提交按钮的情况下使用 Jsoup 提交表单?