Very Strange - Why?

[oo7ml]

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>



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>

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

[ToddMicheau]

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


This can be solved by updating:


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


To this:


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


This will make it both FF and IE compatible.

[oo7ml]

Cool, thanks a million