Solved

Javascript form validation is not working in Firefox

Posted on 2010-09-22
9
339 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

726 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