• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

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
0
Teamsite_Noob
Asked:
Teamsite_Noob
  • 4
  • 3
1 Solution
 
HonorGodCommented:
You seem to have forgotten the code... :-)
0
 
Teamsite_NoobAuthor Commented:
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>
0
 
David S.Commented:
The "demo" variable is undefined. It looks like you mean "fld".

Why does the label for #DC say it's for #DCInsuranceNumber?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
David S.Commented:
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

0
 
HonorGodCommented:
Kravimir, good catch, but it's worse than that...

Something like this perhaps?
<!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 type='text/javascript'>
var demo = null
 
function validateFormOnSubmit( theForm ) {
  demo = document.getElementsByName( 'demo' )[ 0 ]
  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 = "";
  if ( 'style' in fld ) {
    fld.style.background = 'White';
  }
 
  if ((demo.events[0].checked == false) && (demo.events[1].checked == false)) {
    error = "You need to select an event date";
    if ( 'style' in demo.events ) {
      demo.events.style.background = '#FFFFCC';
    }
  } else {
    if ( 'style' in fld ) {
      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 = "";
  if ( 'style' in fld ) {
    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 {
    if ( 'style' in fld ) {
      fld.style.background = 'White';
    }
  }
 
  return error;
}
 
function validateVA(fld) {
  var error = "";
  if ( 'style' in fld ) {
    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>
<div id='debug'> </div>
</body>
</html>

Open in new window

0
 
David S.Commented:
@HG

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

Why did you use a global variable for demo?
0
 
HonorGodCommented:
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.
0
 
HonorGodCommented:
Thanks for the grade & points.

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

Good luck & have a great day
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now