asked on

Validation JS Error in FireFox Only

I had this great, compact validation & submit script refined last week by leakim971 and it was working perfectly. I noticed a problem then, in FireFox. If I run this script as is, in FireFox, it executes perfectly. However, if I add just one more input field (for an email address, let's say) and add another 'if' statement to validate that field, to read like this:
            if (document.reg_form.email.value=="") {
                  themessage = themessage + " - E-Mail:\n";
            }
what happens is that FireFox throws up an error stating "Application Error - An error has occurred in the program". That's all it says. Doesn't process the form information.

I've attached the code below to show how it looks with the added 'if' statement for the email validation field. Has anyone any experience with this kind of FireFox issue and know a workaround?

Thanks.

Cayce

<!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>Document sans nom</title>
<SCRIPT LANGUAGE="JavaScript">
function verify() {
var themessage = "Please Check the Following Fields: \n";
		
if (document.reg_form.Name.value=="") {
themessage = themessage + " - Name:\n";
//Adding this next if statement causes a problem in FireFox
}if (document.reg_form.email.value=="") {
themessage = themessage + " - E-Mail:\n";
}
//alert if fields are empty and cancel form submit
if (themessage != "Please Check the Following Fields: \n") {
alert(themessage);
return false;
}
return true;
}
</script>
<script type="text/javascript">
<!--
	function frmSubmit() {
		document.reg_form.target = "_blank";
		document.reg_form.action = "FormOrder.pl"
		document.reg_form.submit();
		setTimeout('document.reg_form.target = "_self";window.location = "thank_you.shtml"',500);
	}
	
// -->
</script>
</head>
<body>
<form name="reg_form" id="reg_form" method="get" >

	<input name="Name" type="text" id="Name" />
	<input name="email" type="text" id="email" />

	<a href="#" onClick="if(verify()) frmSubmit(); else return false;"><img src="http://www.tarantin.com/images/orderForm_btn.gif" border="0"></a>
</form>
</body>
</html>

Open in new window

scrathcyboy

click on request attention just above my comment, as the MODs to email leakim, and ask him to fix it.

XPreNN

I'm not sure about this, but perhaps it's because you've declared the script tag twice in different ways?

<SCRIPT LANGUAGE="JavaScript">

and

<script type="text/javascript">

Also try adding a space between the curly bracket and the if statement on line 13:

}if (document.reg_form.email.value=="") {

to

} if (document.reg_form.email.value=="") {

That shouldn't make a difference, but who knows, right?

JohnSixkiller

Hi,

I tried your code in last FF and it seems to work in way you meant. But its a little messy. May I suggest you something like (yes it do the same thing :-) ):

<!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>Document sans nom</title>
	
	<script type="text/javascript">
		function validate() {
			var fields = [{name:'Email',id:'email'},{name:'Name',id:'name'}];
			
			for(var i=0; i<fields.length; i++){
				var input = document.getElementById(fields[i].id);
				if(input.value == ''){
					input.focus();
					alert('Please check '+fields[i].name);
					return;
				}
			}

			document.reg_form.submit();
			setTimeout(function(){
				window.document.location.href = 'thank_you.shtml';
			},500);
		}	
	</script>
</head>

<body>
	<form name="reg_form" target='_blank' action='FormOrder.pl' method="get">

	<input name="name" type="text" id="name" />
	<input name="email" type="text" id="email" />

	<span onclick="validate()"><img src="http://www.tarantin.com/images/orderForm_btn.gif" border="0"></span>
	</form>
</body>
</html>

Open in new window

dcayce

ASKER

Let me reload the code in question and do it more accurately. I had reverted back to the original script supplied by leakim971 in my original posting, which worked fine to solve the validation pop-up, but won't allow me to add IF statements for a succession of field names. The IF statement I tried adding, which can be seen in this code, is for an Email input field. But as soon as I try and add it into the script, FireFox gives me an Application Error. Remove it and the script works fine & processes the information all the way through as long as there is only the Full_Name field in the script. but won't let me add to it.

Any suggestions?

Thanks.

Cayce

<!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>

<script type="text/javascript">
	function verify() {
		var themessage = "Please Check the Following Fields: \n";
		
		if (document.reg_form.Full_Name.value=="") {
			themessage = themessage + " - Full Name:\n";
		}
//Adding another IF statement throws error in FireFox
			if (document.reg_form.email.value=="") {
			themessage = themessage + " - email:\n";
		}

		//alert if fields are empty and cancel form submit
		if (themessage != "Please Check the Following Fields: \n") {
			alert(themessage);
			return false;
		}
		return true;
	}
</script>

<script type="text/javascript">
<!--
	function frmSubmit() {
		document.reg_form.target = "_blank";
		document.reg_form.action = "FormMail_Contact.pl"
		document.reg_form.submit();
		setTimeout('document.reg_form.target = "_self";window.location = ""',0);
	}
	
// -->
</script>

</head>
<body onload="javascript:purchProg_swap();">

<form name="reg_form" id="reg_form" method="post" >
<input type="text" name="Full_Name" id="frmname" class="frmfld"  value=""  />
<input type="text" name="email" id="frmemail" class="frmfld"  value=""  />
<a href="#" onClick="if(verify()) frmSubmit(); else return false;"><img src="http://www.cayceweb.com/images/btn_contact.jpg" width="117" height="26" border="0"></a>
</form>

</body>
</html>

Open in new window

dcayce

ASKER

JohnSixkiller:

I can't get yours to work. It alerts on the email but ignores the Name field. There's an inconsistency in the case between the script and the form tag, but even after fixing that, this script wouldn't alert on the Name field.

JohnSixkiller

What behaviour are you expecting exactly? I tried again my and your code in FF 3.6.3 and IE8 and it works.

There is one difference in my code. It loops trough an array of fields. So if you have both fields empty it pops up with message to check an Email only. Then if you fill in an email it alerts you to check a Name.

Have you tried other browsers?

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

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

Start Free Trial

dcayce

ASKER

DaveBaldwin;

Nice. That did it. Not quite sure how, but I'll figure that one out sooner or later. Was it the error being thrown by the onLoad script not being able to execute? The script actually only applies to the index page and shouldn't have been there.

Thanks ever so much for that help.

Cayce

dcayce

ASKER

Nice work! Thanks!

Dave Baldwin

Yes, the onload script showed up in the Firefox Error Console as being undefined. I think that stopped everything right there.

dcayce

ASKER

Thanks again, Dave. There's another question on it's way, for radio button & checkbox inclusion in this validation.