I have a new bit of code that works for me in firefox but not in IE7. Can someone see my problem?

You can see the html here:

http://www.mortgagequoteshere.com/



Here is the javascript:

PHP Code:

function validate(form) {
 var valid = true;
 var FirstErrorField = '';
 //var checkboxes = new Array();
 var thisbox = '';
 
 for(var i = 0; i < form.elements.length; i++ ) {
  //alert( i );
  try{
    if(form.elements[i].type != "hidden") {
    //if(form.elements[i].parentNode.parentNode.parentNode.getElementsByTagName("div")[1].getElementsByTagName("label")[0].getAttribute("class") == "required") {
    if(form.elements[i].getAttribute("class") == "required") {
     if(form.elements[i].value == '') {
      highlightField(form.elements[i]);
      valid = false;
     } 
     else if( form.elements[i].getAttribute("title") == "numeric" ) {
      if ( (isNumeric(form.elements[i].value) == false) || ( form.elements[i].value.length < form.elements[i].getAttribute("maxLength") ) ) {
       highlightField(form.elements[i]);
       valid = false;
      }
      else {
       normalField(form.elements[i]);
      }
     }
     else if( form.elements[i].getAttribute("name") == "EMAIL" ) {
      if ( validateAddress(form.elements[i].value) == false ) {
       highlightField(form.elements[i]);
       valid = false;
      }
      else {
       normalField(form.elements[i]);
      }
     }
     else {
      normalField(form.elements[i]);
     }
    }
   }
  } 
  catch( error ) {
  }
 }
 
 if( valid == false ) {
  alert( "Please fill in all required form fields with valid data." );
 } 
 return valid;
}
function highlightField(field) {
  field.style.backgroundColor = '#FF6666';
  field.style.color = 'white';
}
function normalField(field) {
  field.style.backgroundColor = 'window';
  field.style.color = 'windowtext';
}
function validateAddress(incoming) {
 var emailstring = incoming;
 var ampIndex = emailstring.indexOf("@");
 var afterAmp = emailstring.substring((ampIndex + 1), emailstring.length);
  // find a dot in the portion of the string after the ampersand only
 var dotIndex = afterAmp.indexOf(".");
  // determine dot position in entire string (not just after amp portion)
 dotIndex = dotIndex + ampIndex + 1;
  // afterAmp will be portion of string from ampersand to dot
 afterAmp = emailstring.substring((ampIndex + 1), dotIndex);
  // afterDot will be portion of string from dot to end of string
 var afterDot = emailstring.substring((dotIndex + 1), emailstring.length);
 var beforeAmp = emailstring.substring(0,(ampIndex));
 var email_regex = /^[\w\d\!\#\$\%\&\'\*\+\-\/\=\?\^\_\`\{\|\}\~]+(\.[\w\d\!\#\$\%\&\'\*\+\-\/\=\?\^\_\`\{\|\}\~])*\@(((\w+[\w\d\-]*[\w\d]\.)+(\w+[\w\d\-]*[\w\d]))|((\d{1,3}\.){3}\d{1,3}))$/;
  // index of -1 means "not found"
 if ((emailstring.indexOf("@") != "-1") &&
  (emailstring.length > 5) &&
  (afterAmp.length > 0) &&
  (beforeAmp.length > 1) &&
  (afterDot.length > 1) &&
  (email_regex.test(emailstring)) ) {
    return true;
 } else {
  return false;
 }
} 
function isNumeric(sText) {
   var ValidChars = "0123456789.";
   var IsNumber=true;
   var Char;
 
   for (var i = 0; i < sText.length && IsNumber == true; i++) 
      { 
      Char = sText.charAt(i); 
      if (ValidChars.indexOf(Char) == -1) 
         {
         IsNumber = false;
         }
      }
   return IsNumber;
 
 } 


Take out the try/catch (error) parts. Then an error can be generated and we can see it to figure it out. Or come up with some error trapping so we can see the error.

Oh...and I just noticed this. Change your form name to something other than form. I've seen IE throw up on submit buttons named submit, so change form to something like "MortgageForm".

got rid of the try catch and changed the form name

Change it in the JS, too. I'm thinking that it may be throwing things off there (call it theForm).

At any rate, it's not throwing an error, which suggests that it's not firing the validate function at all.

I changed it but still not generating errors.

  <script language="javascript" type="text/javascript" src="validate.js"></script>
                        <form name="mortgageform" method="post" action="index.php" onsubmit="return validate(this);">

I think I might see why now. I haven't tried this before myself, but I'm thinking your problem might be the image submit button.

1) Try changing it to a normal submit button (just for testing purposes). If it submits, then your problem's there.

2) If 1) works, you'll pretty well have to stick with it.

Personally, I don't get why you're not using PHP validation for this form (unless this is stage 1). JS can be disabled; PHP can't.

It still doesn't work with the submit button.

I just like the javascript validation, I can also add php validation and I probably will.

Originally Posted by ADAM Web Design

Change it in the JS, too. I'm thinking that it may be throwing things off there (call it theForm).

At any rate, it's not throwing an error, which suggests that it's not firing the validate function at all.

So the validate function gets called but it's this expression that will evaluate in firefox but not in IE7. Any ideas why?

if(Theform.elements[i].getAttribute("class") == "required") {

Yes the answer is:

if(Theform.elements[i].attributes['class'].value == "required") {

I didn't even see that part, but it makes sense.

At any rate, it looks like you got it.

ARGG!! Now it works in IE7 and not firefox. The validate function gets called and works and highlights the empty fields and returns false but the action still gets done now.

  <script type="text/javascript" language="JavaScript" src="validate.js"></script>
                        <form name="mortgageform" method="POST" action="index.php" onsubmit="return validate(this);">

Originally Posted by otiller

Yes the answer is:

if(Theform.elements[i].attributes['class'].value == "required") {

There's also a snag with this, which is causing the Firefox failure. If no class attribute is applied .attributes['class'].value is undefined in FireFox and Opera, whereas in I.E. it's "". You probably have one or more elements with no class applied.

You need to check it's not undefined before reading it, or read Theform.elements[ i ].className whose default value is always "".