asked on

JavaScript Browser compatibility Issues

Hi,
Here is my code for a simple form. I cant figure out why it doesnt work in Firefox, it seems like the ValidateDC, ValidateMD and ValidateVA functions are just not called. Can anyone help please. The code works fine in IE

HonorGod

You seem to have forgotten the code... :-)

Teamsite_Noob

ASKER

Oops..there you go

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">

function validateFormOnSubmit(theForm) {
var reason = "";

reason += validateEmail(theForm.email);
reason += validatePhone(theForm.phone);
reason += validateEmpty(theForm.name);
reason += validateDC(theForm.DC);
reason += validateMD(theForm.MD);
reason += validateVA(theForm.VA);
reason += validateEvent(theForm.events);

if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}

return true;
}

function validateEmpty(fld) {
var error = "";

if (fld.value.length == 0) {
fld.style.background = '#FFFFCC';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}

function validateEvent(fld) {
var error = "";
      fld.style.background = 'White';

if ((demo.events[0].checked == false) && (demo.events[1].checked == false)) {
error = "You need to select an event date";
demo.events.style.background = '#FFFFCC';
}
      else fld.style.background = 'White';
return error;
}

function trim(s){
return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\<\>\,\;\:\\\"\[\]]/ ;

if (fld.value == "") {
fld.style.background = '#FFFFCC';
error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = '#FFFFCC';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = '#FFFFCC';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}

function validatePhone(fld) {
var error = "";
      fld.style.background = 'White';
var stripped = fld.value.replace(/[\.\-\ ]/g, '');

if (fld.value == "") {
error = "You didn't enter a phone number.\n";
fld.style.background = '#FFFFCC';
} else if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.\n";
fld.style.background = '#FFFFCC';
} else if (!(stripped.length == 10)) {
error = "The phone number is the wrong length. Make sure you included an area code.\n";
fld.style.background = '#FFFFCC';
}
return error;
}

function validateMD(fld) {
var error = "";
      fld.style.background = 'White';

if ((demo.MD.checked == true) && (demo.MDInsuranceNumber.value == "")) {
error = "You need to enter the license number";
demo.MDInsuranceNumber.style.background = '#FFFFCC';
}
      else fld.style.background = 'White';
return error;
}

function validateDC(fld) {
var error = "";
      fld.style.background = 'White';

if ((demo.DC.checked == true) && (demo.DCInsuranceNumber.value == "")) {
error = "You need to enter the license number";
demo.DCInsuranceNumber.style.background = '#FFFFCC';
}
      else fld.style.background = 'White';

return error;
}

function validateVA(fld) {
var error = "";
      fld.style.background = 'White';

if ((demo.VA.checked == true) && (demo.VAInsuranceNumber.value == "")) {
error = "You need to enter the license number";
demo.VAInsuranceNumber.style.background = '#FFFFCC';
}
      else fld.style.background = 'White';
return error;
}

</script>
</head>

<body>

<p class="blueTextHeader">Providing the following information will help us answer your question(s):</p>
<p class="blueTextHeader"><font color="#ff6633">*Required</font></p>
<form name="demo" onsubmit="return validateFormOnSubmit(this)" action="test.htm">
<table cellspacing="0" cellpadding="4" width="100%" bgcolor="#ffffff" border="0">
<tbody>
<tr>
<td valign="top" bgcolor="#eeeeee"><strong>Date/Location You Wish to Attend:</strong></td>
<td width="70%" colspan="2" valign="top" bgcolor="#eeeeee"><label>
Please select one of the items below:<strong><font color="#ff0000"> *</font></strong><br />
<br />
<input type="radio" name="events" id="June8MartinCrosswind" value="June8MartinCrosswind" /> June 8th/ Martin's Crosswinds, Greenbelt, MD</label><br />
<label><input type="radio" name="events" id="June9MartinWest" value="June9MartinWest" /> June 9th/ Martin's West, Baltimore MD </label></td>
</tr>
<tr>
<td valign="top"><strong><label for="name">Name</label>:</strong></td>
<td colspan="2" valign="top"><input size="40" id="name" name="name" /><strong><font color="#ff0000">*</font></strong></td>
</tr>
<tr>
<td valign="top" bgcolor="#eeeeee"><strong><label for="company">Company</label>:</strong></td>
<td colspan="2" valign="top" bgcolor="#eeeeee"><input id="company" size="40" name="company" /><strong><font color="#ff0000">*</font></strong></td>
</tr>
<tr>
<td valign="top"><strong>
<label for="phone">Phone</label>:</strong></td>
<td colspan="2" valign="top"><input id="phone" size="40" name="phone" /><strong><font color="#ff0000">*</font></strong></td>
</tr>
<tr>
<td valign="top" bgcolor="#eeeeee"><strong><label for="email">E-Mail Address</label>:</strong></td>
<td colspan="2" valign="top" bgcolor="#eeeeee"><input id="email" size="40" name="email" /><strong><font color="#ff0000">*</font></strong></td>
</tr>
<tr>
<td width="30%" rowspan="2" valign="top"><strong>Licensed in Jurisdiction:</strong></td>
<td colspan="2" valign="top"><label>Please select one or more jurisdiction(s) and enter corresponding license number: <strong><font color="#ff0000">*</font></strong><br />
</label></td>
</tr>
<tr>
<td valign="top"><strong>
<label for="DCInsuranceNumber">
<input type="checkbox" name="DC" id="DC" />
DC </label>
</strong> <strong>
<label for="MDInsuranceNumber"> <br />
<input type="checkbox" name="MD" id="MD" /> MD </label>
</strong><strong>
<label for="VAInsuranceNumber"><br />
<input type="checkbox" name="VA" id="VA" />VA </label>
</strong></td>
<td valign="top"><strong>
<label for="DCInsuranceNumber">License Number</label>
:</strong><input name="DCInsuranceNumber" type="text" id="DCInsuranceNumber" size="20" />
<strong>
<label for="MDInsuranceNumber"><br />License Number</label> :</strong> <input name="MDInsuranceNumber" type="text" id="MDInsuranceNumber" size="20" />
<strong>
<label for="VAInsuranceNumber"> </label>
</strong><strong>
<label for="VAInusranceNumber"><br />License Number</label>
:</strong>
<input name="VAInursanceNumber" type="text" id="VAInsuranceNumber" size="20" /></td>
</tr>
</tbody>
</table>
<input name="Submit" value="Send" type="submit" />
</form>
<p>Please print this page for your records prior to sending form.</p>
</body>
</html>

David S.

The "demo" variable is undefined. It looks like you mean "fld".

Why does the label for #DC say it's for #DCInsuranceNumber?

David S.

Hmm... no. You were referring to the form directly by its name. IE allows that but other browsers don't.

Add this line to the functions that use that variable:

var demo = document.forms.demo;

Open in new window

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

David S.

@HG

Why did you add "if ( 'style' in fld )" conditions ?

Why did you use a global variable for demo?

HonorGod

Q: Why did I add "if ( 'style' in fld )" conditions?
A: Because FireFox was failing when the subsequent statement tried to execute: e.g., fld.style.background = 'White';

Q: Why did I use a global variable for demo?
A: Partly because of http://#a24265896, but then, I had to ensure that the element could be found. So, the assignment of a "real" lookup for "demo" occurs when validateFormOnSubmit() is executed. Otherwise, all of the subsequent references to demo in the code fail in FireFox.

HonorGod

Thanks for the grade & points.

I'm sorry that you didn't feel it worthy of an A

Good luck & have a great day