I’m working on a simple JavaScript validation function for a html form, but have run into issues with it using IE7. I don’t get any error messages, the form simply submits without validating. Firefox, and Opera work fine, so I’m really not sure what i am doing wrong here. I’ve googled around, but not found anything helpful, or maybe not Googling the right keywords.
*Also, if anyone could recommend a good tool to use for debugging JavaScript in IE.
Any help will be appreciated.
<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>
The problem (bizarrely) is caused by having a global variable called “parent”, which you’re creating here:
JavaScript has its own variable called “parent”, and you’re overwriting it, and hence confusing the browser. You should declare yours as a local variable, like this:
and that will make it work . It’s good practice to always use “var” for that sort of variable anyway – do it for all the variables you’re using.
As for a JavaScript debugger, you can use FireBug to debug in FireFox. In Internet explorer, Visual Studio is good but expensive. Or you can use Visual Web Developer for free, via the instructions here: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/