Script Works in Explorer but Not in Firefox

[goober]

Ladies & Gentlemen:

I have built a form that client-side validates and posts data to a CRM
beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
(FF) 1.5 when everything works except the validation. In FF it posts
fine to my CRM but with no validation!

Here are snippets of my code together after taking out as much as I can
for brevity sake.

This form, when working, should be able to be filled out, client-side
validated, and then the data posts to SalesForce (our corporate CRM).
This whole process works fine in IE, just not in FF.

Please also note that I am not a programmer by trade, just a web
schmuck trying to get a form to work.

Thanks for any help you can provide.

Ken

<script Language="JavaScript" Type="text/javascript">

function My_Validator()
{

//Validation for Last Name Content
if (TheForm.first_name.value == "")
{
alert("Please enter a value for the \"first_name\" field.");
TheForm.first_name.focus();
return (false);
}

//AND MANY OTHER FIELD VALIDATIONS OMITTED HERE FOR BREVITY

return (true);
}
</SCRIPT>

<form
action="http://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
method="POST" onsubmit="return My_Validator();" language="JavaScript"
name="TheForm">

<input type="hidden" name="lead_source" value="Web Form" />
<input type="hidden" name="Campaign_ID" value="701300000000zjq" />
<input type="hidden" name="oid" value="00D300000000FEp" />
<input type="hidden" name="retURL"
value="http://www.knowitall.com/forms/cd/response.html" />

<table border="0" cellpadding="2" style="border-collapse: collapse"
width="842" id="table2">
<tbody>

<tr>
<td width="196">First Name: </td>
<td colspan="2">&nbsp;<input name="first_name" id="first_name"
type="text" size="50" maxlength="40" />^*</td>
</tr>

//AND MANY OTHER FIELDS OMITTED HERE FOR BREVITY

<input type="submit" name="submit" style="font-family: verdana;
font-size: 9pt" value="Send Form Now" /> </p>

</form>

 

[Matt Kruse]

In FF it posts fine to my CRM but with no validation!

Hopefully this is an annoyance rather than a problem, as server-side
validation should exist also

if (TheForm.first_name.value == "")

You are using TheForm to refer to your form object. This is an IE trick
which makes the name TheForm available as a global variable.
Instead, you should reference the form properly.
See the instructions here for how to reference a form and its elements:
http://www.javascripttoolbox.com/bestpractices/

 

[goober]

Unfortuneately, there is no server-side validation currently. There
should be some probably but honestly, I do not know how to do that.
Can anyone help out with that given the code above? --Ken

 

[Matt Kruse]

Unfortuneately, there is no server-side validation currently. There
should be some probably but honestly, I do not know how to do that.
Can anyone help out with that given the code above? --Ken

First, you should quote what you are replying to. "Above" doesn't mean
anything to most people using non-web-based news readers.

Creating server-side validation depends entirely on the technology on the
server, which would make it appropriate in a different group.

The problem with your client-side validation was pointed out in the original
reply.

 

[RobG]

Ladies & Gentlemen:

I have built a form that client-side validates and posts data to a CRM
beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
(FF) 1.5 when everything works except the validation. In FF it posts
fine to my CRM but with no validation!

Here are snippets of my code together after taking out as much as I can
for brevity sake.

This form, when working, should be able to be filled out, client-side
validated, and then the data posts to SalesForce (our corporate CRM).
This whole process works fine in IE, just not in FF.

Please also note that I am not a programmer by trade, just a web
schmuck trying to get a form to work.

Thanks for any help you can provide.

Matt has already pointed out your main issues - the use of a form name
as a global variable and not having server-side validation also. A few
extra comments:

<script Language="JavaScript" Type="text/javascript">

Drop the language attribute, it's been deprecated for years.

function My_Validator()

It is common practice to use capital letters for function names where
the function is used as a constructor. Otherwise, use a lower case
letter. It also helps to make the name more meaningful, say:

function salesForceValidator()

{

//Validation for Last Name Content

For maintenance sake, the input named 'first_name' should probably be
for a person's first name, not their last

if (TheForm.first_name.value == "")

If you are going to use an object property more than once, it is good to
keep a reference to it and use that subsequently - it is more efficient
and (usually) saves typing. If it is a persons name, you may want to
test that one or more letters were added, rather than just anything:

var form = document.TheForm;
var fName = form.first_name;
if (! /\w/.test(fName.value)) // False if at least one letter entered

{
alert("Please enter a value for the \"first_name\" field.");

You can nest double quotes inside single quotes (and vice versa). A
common practice is to use single quotes in JavaScript and double in
HTML. Also, prompt the user with the field name that they see on the
face of the form, not what you are using in the program, with language
that makes sense to them:

alert('Please enter a name in the "First Name" field.');

TheForm.first_name.focus();

It's good to test methods before using them:

if (fName.focus) fName.focus();

return (false);

There's no need for the parenthesis around 'false', it does nothing useful:

return false;

}

//AND MANY OTHER FIELD VALIDATIONS OMITTED HERE FOR BREVITY

return (true);

return true;

Usually that isn't necessary - if false isn't returned, the form will
submit.

}
</SCRIPT>

<form
action="http://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
method="POST" onsubmit="return My_Validator();" language="JavaScript"

There is no 'language' attribute for a form. There is a 'lang'
attribute, but that is intended to specify "the base language of an
element's attribute values and text content."

The value "JavaScript" is unlikely to be useful. ;-)

name="TheForm">

<input type="hidden" name="lead_source" value="Web Form" />
<input type="hidden" name="Campaign_ID" value="701300000000zjq" />
<input type="hidden" name="oid" value="00D300000000FEp" />
<input type="hidden" name="retURL"
value="http://www.knowitall.com/forms/cd/response.html" />

Unless this is XHMTL (and your attribute names make me think it isn't),
don't use ' />' for empty elements, use correct HTML: '>'

<table border="0" cellpadding="2" style="border-collapse: collapse"
width="842" id="table2">
<tbody>

<tr>
<td width="196">First Name: </td>
<td colspan="2">&nbsp;<input name="first_name" id="first_name"
type="text" size="50" maxlength="40" />^*</td>
</tr>

//AND MANY OTHER FIELDS OMITTED HERE FOR BREVITY

<input type="submit" name="submit"

Don't ever name a submit button 'submit', it will mask the form's submit
method so that you can't call it. It may not matter here, but it is bad
practice and will cause you a problem eventually.

You should only give an element a name if it needs it. There are two
main reasons to give a submit button a name:

1. You have multiple submit buttons and want to know which
one was used

2. You want to use the name to access the button

Neither case seems to apply here, so probably just remove the button's
name attribute.

[...]

 

[goober]

Matt & Rob:

With your help I was able to get the form working properly in FireFox.
I also appreciate the "over and beyond" effort you have given Rob in
helping me as a non-programmer. In the upcoming months I intend to get
some basic JS classes/tutorails/books so that I can at least have a
foundation to be able to start to begin to understand how this all
works. Do you either of you have suggestions on where one would want
to start learning JS. I would like something that is relatively
hands-on instead of just readinig it all out of a book.

Again, I really appreciate your time and help, thanks!

Ken

 

[Gérard Talbot]

goober wrote :

Ladies & Gentlemen:

I have built a form that client-side validates and posts data to a CRM
beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
(FF) 1.5 when everything works except the validation. In FF it posts
fine to my CRM but with no validation!

Here are snippets of my code together after taking out as much as I can
for brevity sake.

This form, when working, should be able to be filled out, client-side
validated, and then the data posts to SalesForce (our corporate CRM).
This whole process works fine in IE, just not in FF.

Please also note that I am not a programmer by trade, just a web
schmuck trying to get a form to work.

Thanks for any help you can provide.

Ken

<script Language="JavaScript" Type="text/javascript">

Language is deprecated; type is both backward and forward-compatible.
Use only type.

function My_Validator()
{

//Validation for Last Name Content
if (TheForm.first_name.value == "")

I'm not going to repeat everything which was said but I am going to tell
you to rely on DOM 2 HTML attributes and methods which are well
supported by modern browsers (including MSIE 6 and MSIE 7):

http://www.w3.org/TR/DOM-Level-2-HTML/html.html

and also to read

Using Web Standards in Your Web Pages
Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

which contains all one needs to look for in order to fix this sort of
issues.

Gérard