[thelist] Forms and getElementById

[Rob Whitener]

I am having a difficult time with something that should be simple.  I have a
form and I have two javascript functions that I want to use to validate this
form.  One to check the validity of an e-mail address, and one to make sure
all of the fields have a value.  The problem is, if there is an error on the
form, I have an image of a red arrow hidden next to each textbox which I
would like to make visible.  I have set id's for all of the images to be the
same as the names of the form elements they correspond to.  However, when I
try to use getElementById, I can't get the image tag, I am also using ppk's
getObj() api (http://www.xs4all.nl/~ppk/js/dhtmloptions.html) with the same
results.  I am confused.  Does having a table and any associated tags inside
a form mess things up?  Should I use a <span> tag?  Below is the code, the
alerts are from all the debugging I have been doing.  Thanks in advance

Rob

the javascript:

function checkEmail(obj){
	var regexp = /([\w|\_]+\.?)*[\w|\_]@([\w|\_]+\.?)*[a-zA-Z]{2,3}$/;
	var tag;
	var e_mail = document.forms[0].elements["e_mail"];
	var tag = document.forms[0].getElementById("e_mail");
	var strings = new Array();
	//make sure there is an email field:
	if(e_mail){
		strings = e_mail.value.match(regexp);
		alert(e_mail.value.search(regexp));
		if(e_mail.value.search(regexp) != -1){
			alert(e_mail.value + "Is a valid e-mail address");

			return true;
		}else{
			alert(e_mail.value + "Is not a valid e-mail
address");
			alert(tag.id);
			tag.style.visbility = "visible";
			//e_mail.focus();
			return false;
		}

	}

}
function checkEmptyFields(obj){
	var tag = document.forms[0];
	var img;
	var i = 0;
	alert(tag.elements.length);
	for (i=0; i < tag.elements.length; i++){
		if(tag.elements[i].value == ""){
			alert(tag.elements[i].name);
			img = new getObj(tag.elements[i].name);
			alert(img.obj.id);
			img.style.visiblity = "visible";
			//tag.elements[i].focus();
			return false;
		}
	}
}
function checkForm(obj){
	if(checkEmail(obj) == false){
		return false;
	}else if(checkEmptyFields(obj) == false){
		return false;
	}else{
		return true;
	}
}

The HTML:

<form id = "customer" onSubmit="return checkForm(this);"
action="sendmail.php" method="post"
enctype="application/x-www-form-urlencoded">
<table class="formattbl">
	<tr>
		<td colspan="2">
			<p class="tblheader">Please enter your
information.</p>
		</td>
	</tr>
	<tr>
		<td width="134">
			<p class="msg">First Name:</p>
		</td>
		<td width="157">
			<input type="text" name="First_name" value="">
		</td>
		<td width="40"><img id = "First_name" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>
	<tr>
		<td>
			<p class="msg">Last Name:</p>
		</td>
		<td>
			<input type="text" name="Last_name" value="">
			<!--<input type="hidden" name="recipient" value =
"rwhitener at designoptions.com">-->
		<td width="40"><img id = "Last_name" src="images/arrow.gif"
style="visibility:hidden;"></td>
		</td>
	</tr>
		<tr>
		<td>
			<p class="msg">Telephone:</p>
		</td>
			<td><input type="text" name="Telephone"
value=""></td>
		<td width="40"><img id = "Telephone" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>
	<tr>
		<td >
			<p class="msg">Street Address:</p>
		</td>
			<td><input type="text" name="Address" value=""></td>
		<td width="40"><img id = "Address" src="images/arrow.gif"
style="visibility:hidden;"></td>

	</tr>
	<tr>
		<td><p class="msg">City:</p>
		</td>
		<td><input type="text" name="City" value=""></td>
		<td width="40"><img id = "City" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>
	<tr>
		<td><p class="msg">State:</p>
		</td>
		<td><input type="text" name="State" value=""></td>
		<td width="40"><img id = "State" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>

	<tr>
		<td><p class="msg">Zip:</p></td>
		<td><input type="text" name="Zip" value=""></td>
		<td width="40"><img id = "Zip" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>
	<tr>
		<td><p class="msg">E-Mail Address:</p></td>
		<td><input type="text" name="e_mail" value=""></td>
		<td width="40"><img id = "e_mail" src="images/arrow.gif"
style="visibility:hidden;"></td>
	</tr>
	<tr>
		<td>
			<input class="buttntxt" type="submit" value="Send
Message">
		</td>
	</tr>
</table>

</form>