JavaScript and Mozilla

[[Az]]

I'm getting a weird error in Mozilla which I can't seem to find an answer to. Basically, I'm doing some simple form validation before submitting the form. If it fails I want it to stop the submittal process. The code I've got works fine for IE but in Mozilla it flashes the error on-screen with an alert statement but then proceeds to submit the form anyway.

the code is

for (var loop = 0; loop < fields_to_check.length; loop++)
			{
				if (document.forms[form_to_check].elements[fields_to_check[loop]].value == '')
				{
					alert ('You must enter '+field_warnings[loop]+' !');
					document.forms[form_to_check].elements[fields_to_check[loop]].focus();
					event.returnValue=false;
					return false;
				}
}

It's the event.returnValue=false statement that stops the form submission but Mozilla seems to ignore it and searching on Google hasn't turned up any answers. All ideas are welcome

[Vincent Puglia]

why don't you set a flag -- isOk2Send = true; -- then switch it when validation fails, and submit the form through the function -- if (isOk2Send) formObj.submit()

See the Validating Forms script/tutorial at my site ( GrassBlade )

Vinny

[blufive]

I'm no JS guru, but I think your problem is that IE and Moz have different event models, and you're using the IE one.

Any chance you can show us ALL the code?

[[Az]]

it's part of a large PHP page but here's the pertinent bits

<script language="JavaScript">
		function validateRegistrationForm()
		{
			var fields_to_check = Array('username','email','password');
			var field_warnings = Array('a username','an email address','a password');
			var form_to_check = 'user_registration_form';
			
			// loop through the fields we want to check
			for (var loop = 0; loop < fields_to_check.length; loop++)
			{
				if (document.forms[form_to_check].elements[fields_to_check[loop]].value == '')
				{
					alert ('You must enter '+field_warnings[loop]+' !');
					document.forms[form_to_check].elements[fields_to_check[loop]].focus();
					event.returnValue=false;
					return false;
				}
}
}
</script>

form is straightforward. Ignore the PHP escape characters

<form name=\"user_registration_form\" action=\"".$PHP_SELF."\" method=\"post\" onSubmit=\"validateRegistrationForm()\">

loads of fields

</form>

[kgish]

I think that your problem has to do with the return value of the validate function and how it is handled within the onsubmit event handler in the form tag.

I would suggest the following changes:

<form ... onsubmit="return validateRegistrationForm()"> 

 function validateRegistrationForm() {
  var rc = true; // until proven otherwise.
  ....
  for (var loop = 0; loop < fields_to_check.length; loop++) {
	if (document.forms[form_to_check].elements[fields_to_check[loop]].value == '') { 
	...
	// event.returnValue=false;
	rc = false;
	}
  }
  ....
  return rc;
}

[[Az]]

stroke of genius kgish, or at least it is to my humble JavaScript skills. Adding that return to the <form> HTML has done the trick. I didn't even need the extra variable rc

[kgish]

Well even the most humble javascript gurus need a stroke of genius once in awhile. Even if it comes from a random passerby like me.

Glad I could help!