表单验证无法正常工作
[英]Form Validation is not working properly
问题描述
JavaScript无法正确验证表单。 当未输入必填字段时，浏览器仅加载到下一页，就像用户确实输入了该字段一样，而不显示警告框。
<head>
<script type="text/javascript">
function inputValidation() {
var dateBox= document.forms["form"]["date"].value;
if (dateBox== null || dateBox== "") {
alert("Please enter an approximate date.");
return false;
}
}
</script>
</head>
<body>
<form name="form" id="form" action="add.php" onsubmit="inputValidation()" method="post">
<fieldset id="contactFields">
<legend>Client Information</legend><br>
<p id="require"><span>*</span>Required information</p><br>
<table width="291" height="158">
<tr>
<td>Approximate Date Serviced:<span>*</span></td>
<td><input type="text" name="date" id="date" size="20" maxlength="25">
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="25" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lName" id="lName" size="20" maxlength="25"/></td>
</tr>
</table>
<label class="blockLabel">Comments:<span>*</span><br><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>
<label id="wordcountLabel" for="wordcount">
<div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0"></div>
</label>
</fieldset>
<div id="submit"><input text-align="center" class="button1" type="submit" value="Submit"></div>
<input text-align="center" class="button3" type="reset" value="Reset" />
</form>
</body>
有任何想法吗？ 请帮忙！
2 个解决方案
解决方案1
2 已采纳 2013-07-09 22:01:02
假设代码在起作用，而只有验证不起作用-我的猜测是，您需要类似以下内容：
onsubmit="return inputValidation()"
完整代码：
<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function inputValidation()
{
var dateBox= document.forms["form"]["date"].value;
if (dateBox== null || dateBox== "")
{
alert("Please enter an approximate date.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" id="form" action="add.php" onsubmit="return inputValidation()" method="post">
<fieldset id="contactFields">
<legend>Client Information</legend><br />
<p id="require"><span>*</span>Required information</p><br />
<label class="blockLabel">Approximate Date Serviced: <span>*</span><br/><input type="date" name = "date" id="date"/><br/><br/>
<label class="blockLabel">First Name: <span>*</span><br/><input type="text" name = "firstName" id="firstName"/><br/><br/>
<label class="blockLabel">Last Name: <span>*</span><br/><input type="text" name = "lastName" id="lastName"/><br/><br/>
<label class="blockLabel">Comments:<span>*</span><br/><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>
<label id="wordcountLabel" for="wordcount">
<div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0" /></div>
</label>
</fieldset>
<div id="submit"><input text-align="center" class="button1" type="submit" value="Submit" /></div>
<input text-align="center" class="button3" type="reset" value="Reset" />
</form>
</body>
解决方案2
1 2013-07-09 21:57:43
您是否尝试过使用浏览器进行调试并检查dateBox的值？ 我从未见过像这样引用过的表单值，它可能没有获得您需要的值。
我的表格验证无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.