Lea*_*Lea 0 html javascript javascript-events
我正在为一个html表单开发一个简单的javascript验证函数,但是使用IE7遇到了它的问题.我没有收到任何错误消息,表单只是提交而不验证.Firefox和Opera工作正常,所以我真的不确定我在这里做错了什么.我用谷歌搜索,但没有发现任何有用的,或者可能没有谷歌搜索正确的关键字.
*另外,如果有人可以推荐一个好的工具用于在IE中调试javascript.
任何帮助将不胜感激.
<html>
<head>
<title>Hello!</title>
<style type="text/css">
.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}
</style>
<script type="text/javascript">
function checkForm() {
age = document.getElementById("age").value;
name = document.getElementById("name").value;
comment = document.getElementById("comment").value;
parent = document.getElementById("parent").value;
phone = document.getElementById("phone").value;
sig = document.getElementById("sig").value;
player = document.getElementById("player").value;
iagree = document.getElementById("iagree").value;
if (age == "") {
hideAllErrors();
document.getElementById("ageError").style.display = "inline";
document.getElementById("age").select();
document.getElementById("age").focus();
return (false);
} else if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
return (false);
} else if (comment == "") {
hideAllErrors();
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
return (false);
} else if (parent == "") {
hideAllErrors();
document.getElementById("parentError").style.display = "inline";
document.getElementById("parent").select();
document.getElementById("parent").focus();
return (false);
} else if (phone == "") {
hideAllErrors();
document.getElementById("phoneError").style.display = "inline";
document.getElementById("phone").select();
document.getElementById("phone").focus();
return (false);
} else if (sig == "") {
hideAllErrors();
document.getElementById("sigError").style.display = "inline";
document.getElementById("sig").select();
document.getElementById("sig").focus();
return (false);
} else if (player == "") {
hideAllErrors();
document.getElementById("playerError").style.display = "inline";
document.getElementById("player").select();
document.getElementById("player").focus();
return (false);
} else if (iagree != "I agree") {
hideAllErrors();
document.getElementById("iagreeError").style.display = "inline";
document.getElementById("iagree").select();
document.getElementById("iagree").focus();
return (false);
}
return (true);
}
function hideAllErrors() {
document.getElementById("ageError").style.display = "none"
document.getElementById("nameError").style.display = "none"
document.getElementById("commentError").style.display = "none"
document.getElementById("parentError").style.display = "none"
document.getElementById("phoneError").style.display = "none"
document.getElementById("sigError").style.display = "none"
document.getElementById("playerError").style.display = "none"
document.getElementById("iagreeError").style.display = "none"
}
</script>
</head>
<body>
<form onsubmit="return checkForm();" action="contact.php" method="post">
<div style="background: #ffffe5; padding:5px;">
<label for="isnew"><b>I am a new member:</b></label><input type="checkbox" id="isnew" name="isnew" value="New Member" /><br />
(If you are re-registering for the year, please leave this box unchecked)
</div>
<table>
<tr>
<td></td>
</tr>
<tr>
<td>
<b><label for="age">Your Age:</label></b><br />
<input type="text" id="age" name="age" maxlength="3" style="width:40px; background: #ffffe5;" value="" />
<div class="error" id="ageError">
Required: Please enter your age<br />
</div>
</td>
<td><b>Girl or Boy?:</b><br />
<select name="gender" size="1">
<option value="-1" selected="selected">
Choose One
</option>
<option value="Girl">
Girl
</option>
<option value="Boy">
Boy
</option>
</select></td>
</tr>
<tr>
<td><b><label for="name">Your Name:</label></b></td>
</tr>
<tr>
<td>
<input type="text" name="name" id="name" maxlength="40" value="" />
<div class="error" id="nameError">
Required: Please enter your name<br />
</div>
</td>
</tr>
<tr>
<td><b>Home Address:</b></td>
</tr>
<tr>
<td>
<textarea name="address" id="comment">
</textarea><br />
<div class="error" id="commentError">
Required: Please enter your address<br />
</div>
</td>
</tr>
<tr>
<td><b><label for="parent">Parent/Guardian Name:</label></b></td>
</tr>
<tr>
<td>
<input type="text" name="parent" id="parent" maxlength="40" value="" />
<div class="error" id="parentError">
Required: Please enter your parent or guardian's name<br />
</div>
</td>
</tr>
<tr>
<td><b>Address(If different from above):</b></td>
</tr>
<tr>
<td>
<textarea name="altaddress">
</textarea></td>
</tr>
<tr>
<td><b>Phone Details:</b></td>
</tr>
<tr>
<td>
<b><label for="phone">Best Contact Number:</label></b><br />
<input type="text" id="phone" name="contactphone" maxlength="40" value="" />
<div class="error" id="phoneError">
Required: Please enter a phone number<br />
</div>
</td>
<td><b>Mobile:</b><br />
<input type="text" name="contactmob" maxlength="40" /></td>
</tr>
<tr style="background: #ffffe5;">
<td><b>Medical Conditions:</b></td>
</tr>
<tr style="background: #ffffe5;">
<td>
<textarea name="medical">
</textarea></td>
<td><small>(If there are any medical conditions that trainers, and the club should know about, please list them here).</small></td>
</tr>
<tr>
<td><b>Player Agreement:</b></td>
</tr>
</table>
<div style="border: 1px solid #e0e0e0; padding:5px;">
(If under the age of 18 years of age, a parent or legal guardian must sign)<br />
I, <input type="text" name="agreename" id="sig" maxlength="40" style="border:none; background:#ffffe5;" value="" />
<div class="error" id="sigError">
<-(Required: Please enter your parent or guardian's name)
</div>being the parent/legal guardian of <input type="text" name="playername" maxlength="40" style="border:none; background:#ffffe5;" id="player" value="" />
<div class="error" id="playerError">
<-(Required: Please enter your child's name)
</div>hereby give consent for the above named player to register to play Australian Football.<br />
<br />
</div><br />
<br />
<div style="background: #ffffe5; padding:5px;">
By submitting this form, and signing in the field below, I hereby agree that I am <b>over 18yr's of age</b> and/or have all nessecary permissions to legally process this document.
<div style="maring:0; padding: 0;">
<div style="margin-bottom:5px;">
<b><label for="iagree">Please type this in the field below: <input type="text" style="background: #e0e0e0; width:45px; color:#000000;" disabled="disabled" value="I agree" /></label></b><br />
<br />
<input type="text" name="iagree" value="" id="iagree" />
<div class="error" id="iagreeError">
<-(Required: You must confirm this documents legality)
</div>
</div><br />
</div>
</div>
<div>
<input type="submit" name="submitreg" value="Join Our Club!" />
</div>
</form>
</body>
</html>
问题(奇怪)是由一个名为"parent"的全局变量引起的,你在这里创建:
parent = document.getElementById("parent").value;
JavaScript有自己的变量叫做"父",你要覆盖它,因此混淆了浏览器.你应该将你的声明声明为局部变量,如下所示:
var parent = document.getElementById("parent").value;
这将使它工作.最好总是对那种变量使用"var" - 对你正在使用的所有变量都这样做.
对于JavaScript调试器,您可以使用FireBug在FireFox中进行调试.在Internet Explorer中,Visual Studio很好但价格昂贵.或者您可以通过以下说明免费使用Visual Web Developer:http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express /