Solved

Javascript form validation is not working in Firefox

Posted on 2010-09-22
9
336 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:netrxinc
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33738074
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
0
 
LVL 3

Expert Comment

by:guitar7man
ID: 33738116
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.
0
 
LVL 3

Expert Comment

by:guitar7man
ID: 33738134
Just as a side note - Javascript validation does *nothing* for security. This is just for user-experience!
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33738192
works fine for me:
return true if all validation pass

<html>
<head>
<script language="javascript" type="text/javascript">

function validateForm(formObjekt)
{
 if(""==formObjekt.FirstName.value)
 {
  alert("Please enter your full name.");
  formObjekt.FirstName.focus();
  return false;
 }
 if(""==formObjekt.Company.value)
 {
  alert("Please enter company name.");
  formObjekt.Company.focus();
  return false;
 }
 if(""==formObjekt.Phone.value)
 {
  alert("Please enter your phone number.");
  formObjekt.Phone.focus();
  return false;
 }
 if(!IsEmailValid(formObjekt.Email.value))
 {
  alert("Please enter a valid email address.");
  formObjekt.Email.focus();
  return false;
 }
 if("Enter your questions or comments here."==formObjekt.Comments.value)
 {
  alert("Please enter your comments or question.");
  formObjekt.Comments.focus();
  return false;
 }
 if(""==formObjekt.Comments.value)
 {
  alert("Please enter your comments or question.");
  formObjekt.Comments.focus();
  return false;
 }
 alert("true");
 return true;
}

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;
}
</script>
</head>
</body>
<form name="contact" method="post" action="/webformmailer.php" onSubmit="return validateForm(this);"> 
 <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>
</body>
</html>

Open in new window

0
 

Author Comment

by:netrxinc
ID: 33738819
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.

0
 
LVL 3

Expert Comment

by:guitar7man
ID: 33738880
Install Web Developer Toolbar for Firefox, that will tell you where it's choking.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33738907
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)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33739156
>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

0
 

Author Closing Comment

by:netrxinc
ID: 33765654
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.

 
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question