Very Strange - Why?

Hi, i have a contact form on my site:

Name:
Email:
Message:

The validation works perfect on all 3 fields in IE, but only the validation on the name field works in FF...

Why would this be?


JS code:

<SCRIPT LANGUAGE="JavaScript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else countfield.value = maxlimit - field.value.length;
}


function validate_name(field,alerttxt)
	{
		with (field)
			{
				numofchar=value.length;
				if (numofchar<1) 
					  {alert(alerttxt);return false}
				else {return true}
			}
	}

	
function validate_email(field,alerttxt)
	{
		with (field)
			{
				if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(contact.email.value))
					{return (true);}
				else {alert(alerttxt);return false};

			}
	}

function validate_message(field,alerttxt)
	{
		with (field)
			{
				numofchar=value.length;
				if (numofchar<1) 
					  {alert(alerttxt);return false}
				else {return true}
			}
	}
	


//Function called from Form
function validate_form(thisform)
{
	with (thisform)
	{
		 if (validate_name(name,"Please enter your name")==false)
		  {name.focus();return false}
		 if (validate_email(email,"Please enter a valid email address")==false)
		  {email.focus();return false}
		 if (validate_message(message,"Please enter your message")==false)
		  {message.focus();return false}
		  		
	}
}
</script>

Code (markup):

Form code:

<form name="contact" id="form" action="contact.processor.php" onSubmit="return validate_form(this);" enctype="multipart/form-data" method="post"> 
          
            <div class="form_heading">Name:</div>
            <div><input type="text" class="form" name="name" size="34" maxlength="30" tabindex="1" /></div>
			
            <div class="form_heading">Email:</div>
			<div><input type="text" class="form" name="email" size="34" maxlength="49" tabindex="2" /></div>
			
            <div class="form_heading">Message:</div>
			<div><textarea tabindex="3" cols="35" rows="9" name="message" class="form" wrap="physical" onKeyDown="textCounter(this.form.message,this.form.remLen,1000);"	onKeyUp="textCounter(this.form.message,this.form.remLen,1000); "onFocus="this.value=''; this.onfocus=null;"></textarea></div> 
                
            <div class="form1"><input type="text" name="remLen" size="3" maxlength="4" value="1000" class="form2" /> characters remaining</div>
				    
            <div style="padding:10px 0px 0px 12px"><input name="submit" tabindex="4" type="submit" id="submit" value="Send" /> <input type="reset" tabindex="5" name="Reset" value="Reset" /></div>
			  
			</form>

HTML:

I don't know if this makes any difference but my page is strict xhtml, thanks in advance

 

In FF if you click Tools > Error Console you can get a detailed report about what's wrong, the error your getting is:

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: file:///C:/noName.html
Line: 20

Code (markup):

This can be solved by updating:

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(contact.email.value))

Code (markup):

To this:

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.getElementsByName('email')[0].value))

Code (markup):

This will make it both FF and IE compatible.

 

Cool, thanks a million