Solved

Javascript form validation is not working in Firefox

Posted on 2010-09-22
9
328 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now