Solved

Javascript form validation is not working in Firefox

Posted on 2010-09-22
9
338 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] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

739 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