Link to home
Start Free TrialLog in
Avatar of netrxinc
netrxinc

asked on

Javascript form validation is not working in Firefox

Hi,

I have a contact page that includes a contact form. The page uses Javascript to validate the fields onSubmit.  The code works fine in IE, but in Firefox the validation is not functioning, the alerts are not invoked. I have attached the code and the HTML for the form.

Thanks in advance.
Javascript validation code included in the <head>:

<script language="javascript" type="text/javascript">
<!-- hide script from older browsers
function validateForm(contact)
{
 if(""==document.forms.contact.FirstName.value)
 {
  alert("Please enter your full name.");
  document.forms.contact.FirstName.focus();
  return false;
 }
 if(""==document.forms.contact.Phone.value)
 {
  alert("Please enter your phone number.");
  document.forms.contact.Phone.focus();
  return false;
 }
 if(!IsEmailValid(document.forms.contact.Email.value))
 {
  alert("Please enter a valid email address.");
  document.forms.contact.Email.focus();
  return false;
 }
 if("Enter your questions or comments here."==document.forms.contact.Comments.value)
 {
  alert("Please enter your comments or question.");
  document.forms.contact.Comments.focus();
  return false;
 }
 if(""==document.forms.contact.Comments.value)
 {
  alert("Please enter your comments or question.");
  document.forms.contact.Comments.focus();
  return false;
 }
}

function IsEmailValid(sEmail) {
var EmailOk  = true;
var AtSym    = sEmail.indexOf('@');
var Period   = sEmail.lastIndexOf('.');
var Space    = sEmail.indexOf(' ');
var Length   = sEmail.length - 1;   // Array is from 0 to length-1
if (sEmail=='') {
   return false;
}
if ((AtSym < 1) ||                     // '@' cannot be in first position
    (Period <= AtSym+1) ||             // Must be atleast one valid char btwn '@' and '.'
    (Period == Length ) ||             // Must be atleast one valid char after '.'
    (Space  != -1))                    // No empty spaces permitted
   {
      EmailOk = false;
   }
return EmailOk;
}
stop hiding script -->
</script>

*************************

HTML for the form:

<form name="contact" method="post" action="/webformmailer.php" onSubmit="return validateForm(contact);"> 
 <input type="hidden" name="subject" value="Contact Form Mail" />
 <input type="hidden" name="redirect" value="thankyou.html" />
 <br />
 <label>Name:</label>
 <p><input name="FirstName" type="text" size="30" class="textfield" /></p>
 <label>Company:</label>
 <p><input name="Company" type="text" id="Company" size="30" class="textfield" /></p>
 <label>Phone Number:</label>
 <p><input name="Phone" type="text" id="Phone" class="textfield" /></p>
 <label> E-Mail:</label>
 <p><input name="Email" type="text" size="30" class="textfield" /></p>
 <label>Comments:</label>
 <p><textarea name="Comments" cols="49" rows="10" class="textfield">Enter your questions or comments here.</textarea></p>
 <p>&nbsp;</p>
 <p align="center">
 <input type="submit" name="submit" value="Send"/>
 <input type="hidden" name="form_delivery" value="hourly"/>
 <input type="hidden" name="form_format" value="html"/>
 </p>
 <br />
</form>

Open in new window

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

none of the alerts are coming? please confirm this, if not please be specific

If yes, please replace line 7 with

if( document.forms[0].FirstName.value.length == 0)

and check
I haven't tested the above (and that logic may work), but what I normally do is make the submit button a button type and not a submit type, and then execute the javascript onclick of that button. Then in the javascript I execute the submission.

Example:
-----------
function validateForm() {
      var re_blank = /^[\s]*$/i;
      var emailCheck = /regex--here/;

      if (re_blank.test(document.contactForm.iname.value)) {
            alert("Please enter your name");
            document.contactForm.iname.focus();
      } else if (re_blank.test(document.contactForm.comments.value)) {
            alert("Please enter your question/comments");
            document.contactForm.comments.focus();
      } else if (!emailCheck.test(document.contactForm.email_address.value)) {
            alert("Invalid email address");
            document.contactForm.email_address.focus();
      } else {
            document.contactForm.formSubmit.disabled=true;
            document.contactForm.formSubmit.bgcolor='#000000';
            document.contactForm.formSubmit.value='Submit';
            document.contactForm.submit();
      }
}


<input id="formSubmit" onClick="javascript:validateForm();" type="button" value="Submit" border="0" name="formSubmit">

Doesn't answer your questions really, but just throwing it out there for any benefit/ideas.
Just as a side note - Javascript validation does *nothing* for security. This is just for user-experience!
ASKER CERTIFIED SOLUTION
Avatar of kadaba
kadaba
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of netrxinc
netrxinc

ASKER

The code works correctly when the page is viewed in IE,  but none of the alerts work when used with Firefox 3.6.  I verified that Javascript is enabled for Firefox.

gurvinder372, I tried with the replacement code as well and still did not get any alert.

Install Web Developer Toolbar for Firefox, that will tell you where it's choking.
Works for me on 3.6.
Try these:
1.
add this in the html page, say after the body
<noscript>JavaScript is off!</noscript>
2.
instead of alert use console.log("your message"). This needs fire bug for Mozilla and you can see the console messages, does not work in IE (console messages)
>Javascript validation code included in the :
>
>*************************
>
>HTML for the form:


What did you remove the other part of your page ? DOCTYPE, used DTD or html tag for example ?
What's you firefox version ?

Try with :


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

Open in new window

The code did not work as entered, but it forced me to restructure my original code.  I changed the javascript field verification code to be:
<script language="javascript" type="text/javascript">
<!--
function validateForm()
{
 if(""==document.contact.FirstName.value)
 {
  alert("Please enter your full name.");
  document.contact.FirstName.focus();
  return false;
}
if(""==document.contact.Phone.value)
 {
  alert("Please enter your phone number.");
  document.contact.Phone.focus();
  return false;
}
etc.....  I changed document.form.contact.field.value to document,contact.field.value.  This fixed it.