netrxinc
asked on
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.
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> </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>
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.co ntactForm. iname.valu e)) {
alert("Please enter your name");
document.contactForm.iname .focus();
} else if (re_blank.test(document.co ntactForm. comments.v alue)) {
alert("Please enter your question/comments");
document.contactForm.comme nts.focus( );
} else if (!emailCheck.test(document .contactFo rm.email_a ddress.val ue)) {
alert("Invalid email address");
document.contactForm.email _address.f ocus();
} else {
document.contactForm.formS ubmit.disa bled=true;
document.contactForm.formS ubmit.bgco lor='#0000 00';
document.contactForm.formS ubmit.valu e='Submit' ;
document.contactForm.submi t();
}
}
<input id="formSubmit" onClick="javascript:valida teForm();" type="button" value="Submit" border="0" name="formSubmit">
Doesn't answer your questions really, but just throwing it out there for any benefit/ideas.
Example:
-----------
function validateForm() {
var re_blank = /^[\s]*$/i;
var emailCheck = /regex--here/;
if (re_blank.test(document.co
alert("Please enter your name");
document.contactForm.iname
} else if (re_blank.test(document.co
alert("Please enter your question/comments");
document.contactForm.comme
} else if (!emailCheck.test(document
alert("Invalid email address");
document.contactForm.email
} else {
document.contactForm.formS
document.contactForm.formS
document.contactForm.formS
document.contactForm.submi
}
}
<input id="formSubmit" onClick="javascript:valida
Doesn't answer your questions really, but just throwing it out there for any benefit/ideas.
Just as a side note - Javascript validation does *nothing* for security. This is just for user-experience!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
gurvinder372, I tried with the replacement code as well and still did not get any alert.
Install Web Developer Toolbar for Firefox, that will tell you where it's choking.
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)
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)
>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 :
>
>*************************
>
>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">
ASKER
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.Fi rstName.va lue)
{
alert("Please enter your full name.");
document.contact.FirstName .focus();
return false;
}
if(""==document.contact.Ph one.value)
{
alert("Please enter your phone number.");
document.contact.Phone.foc us();
return false;
}
etc..... I changed document.form.contact.fiel d.value to document,contact.field.val ue. This fixed it.
<script language="javascript" type="text/javascript">
<!--
function validateForm()
{
if(""==document.contact.Fi
{
alert("Please enter your full name.");
document.contact.FirstName
return false;
}
if(""==document.contact.Ph
{
alert("Please enter your phone number.");
document.contact.Phone.foc
return false;
}
etc..... I changed document.form.contact.fiel
If yes, please replace line 7 with
if( document.forms[0].FirstNam
and check