[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 358
  • Last Modified:

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

0
netrxinc
Asked:
netrxinc
  • 3
  • 2
  • 2
  • +2
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
guitar7manCommented:
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
 
guitar7manCommented:
Just as a side note - Javascript validation does *nothing* for security. This is just for user-experience!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
kadabaCommented:
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
 
netrxincAuthor Commented:
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
 
guitar7manCommented:
Install Web Developer Toolbar for Firefox, that will tell you where it's choking.
0
 
kadabaCommented:
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
 
leakim971PluritechnicianCommented:
>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
 
netrxincAuthor Commented:
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now