XHTML Javascript compatability with Firefox

J

JF01

Hi,

I have an XHTML page with the following DTD Declaration: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Inside, I have a form with the following format:

<form action="login.asp" method="post" id="frm1">
<input type="text" size="30" name="email" id="email">
<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick=javascript:callsubmit();>

Inside the <head> tag, I have the following javascript:

<script type="text/javascript">
function callsubmit()
{

var pwl = frm1.pass.value.length;

if (frm1.email.value == "")
{alert("The e-mail field is required");}

else
{frm1.submit();}
}
</script>

This is designed as a very simple form validation script, and it works
perfectly in IE6, but in Firefox 1.5, the javascript does not run. Can
anyone suggest how I can make the script compatible with both browsers?
 
M

Mike Massonnet

JF01 said:
Hi,

I have an XHTML page with the following DTD Declaration: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Inside, I have a form with the following format:

<form action="login.asp" method="post" id="frm1">
<input type="text" size="30" name="email" id="email">
<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick=javascript:callsubmit();>
Click to expand...

try with something more comform :
<input type="text" size="30" name="email" id="email" />
<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick="callsubmit()" />

--
The following two statements are usually both true:

There's not enough documentation.

There's too much documentation.
-- Larry Wall in <[email protected]>
 
J

JF01

Didn't help the compatability with Firefox. It works when I remove the
DTD declaration, but the page then doesn't render properly.
 
M

Mike Massonnet

JF01 said:
Didn't help the compatability with Firefox. It works when I remove the
DTD declaration, but the page then doesn't render properly.
Click to expand...

i think the whole page is not compliant to the standard you are using!
your friend is validator.w3.org
 
N

Neredbojias

With neither quill nor qualm, JF01 quothed:
Hi,

I have an XHTML page with the following DTD Declaration: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Inside, I have a form with the following format:

<form action="login.asp" method="post" id="frm1">
<input type="text" size="30" name="email" id="email">
<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick=javascript:callsubmit();>

Inside the <head> tag, I have the following javascript:

<script type="text/javascript">
function callsubmit()
{

var pwl = frm1.pass.value.length;

if (frm1.email.value == "")
{alert("The e-mail field is required");}

else
{frm1.submit();}
}
</script>

This is designed as a very simple form validation script, and it works
perfectly in IE6, but in Firefox 1.5, the javascript does not run. Can
anyone suggest how I can make the script compatible with both browsers?
Click to expand...

This probably isn't it, but should be: onclick="callsubmit()"
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

JF01 wrote :
Hi,

I have an XHTML page with the following DTD Declaration: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Inside, I have a form with the following format:

<form action="login.asp" method="post" id="frm1">
<input type="text" size="30" name="email" id="email">
Click to expand...

In strict DTD, the content of form elements must be block-level elements
except another form. So,

<form action="login.asp" method="post" id="frm1">
<p> <input type="text" size="30" name="email" id="email">
(...)

or

<form action="login.asp" method="post" id="frm1">
<div> <input type="text" size="30" name="email" id="email">
(...)


<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick=javascript:callsubmit();>
Click to expand...

onclick="callsubmit();"

Attribute values must be quoted in XHTML (also recommended in HTML 4);
you can declare default script language with
<meta http-equiv="Content-Script-Type" content="text/javascript" />
in the <head> section. The "javascript:" part is not needed.

Also, if the button is a submit button, then why not use a submit button?
E.g.:
<input type="submit" (...)

Inside the <head> tag, I have the following javascript:

<script type="text/javascript">
function callsubmit()
{

var pwl = frm1.pass.value.length;
Click to expand...

var pwl = document.getElementById("frm1").pass.value.length;

This mistake is frequently encountered:
Using Web standards in your web page:
Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

Where is your pass form control input? It must be declared somewhere.
if (frm1.email.value == "")
{alert("The e-mail field is required");}

else
{frm1.submit();}
}
Click to expand...

Everywhere you have frm1, you should have first - to begin with -
declared this in your script:

var frm1 = document.getElementById("frm1");
</script>

This is designed as a very simple form validation script, and it works
perfectly in IE6, but in Firefox 1.5, the javascript does not run. Can
anyone suggest how I can make the script compatible with both browsers?
Click to expand...

Bookmark these 2 pages for your Firefox issues/problems:

Using Web standards in your web page:
http://www.mozilla.org/docs/web-developer/upgrade_2.html

Mozilla Web author FAQ
http://www.mozilla.org/docs/web-developer/faq.html

More on accessing forms and form elements:
Referencing Forms and Form Controls by comp.lang.javascript newsgroup
FAQ notes
http://jibbering.com/faq/faq_notes/form_access.html
DOM 2 specification on accessing forms and form elements
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357

Gérard
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

JF01 wrote :
Didn't help the compatability with Firefox. It works when I remove the
DTD declaration, but the page then doesn't render properly.
Click to expand...

That's because of
Bug 256932: Add support for exposing elements by their id/name in the
global scope (for IE compat)
https://bugzilla.mozilla.org/show_bug.cgi?id=256932

When you remove the doctype declaration, you trigger Firefox into
backward compliant rendering mode (or quirks mode). The right thing to
do is to always use a strict DTD (a strict doctype declaration) so taht
all modern browsers trigger standards compliant rendering mode.
To view what is the rendering mode triggered by a webpage in Firefox:
Tools/Page info/General tab

I gave you 2 links to bookmarks which address the best, most reliable,
backward and forward-compatible way to get access to any DOM node.

Your problem would have been halfway solved if only you had looked into
the javascript console for the error message. There is normally a
warning and a recommendation to use getElementById in the javascript
console instead of referring to document elements with id/name.

Gérard
 
T

Toby Inkster

JF01 said:
<form action="login.asp" method="post" id="frm1">
<input type="text" size="30" name="email" id="email">
<input type="button" value="Register" class="formbutton1" id="submit1"
name="submit1" onclick=javascript:callsubmit();>

<script type="text/javascript">
function callsubmit()
{
var pwl = frm1.pass.value.length;
if (frm1.email.value == "")
{alert("The e-mail field is required");}
else
{frm1.submit();}
}
</script>
Click to expand...

Yucky!

<script type="text/javascript">
function callsubmit ()
{
var e = document.getElementById('email');
return (e.value!='');
}
</script>
<form action="login.asp" method="post" id="frm1"
onsubmit="return callsubmit();">
<fieldset>
<legend>Log in</legend>
<input type="text" size="30" name="email" id="email" />
<input type="submit" name="submit1" value="Register"
class="formbutton1" id="submit1" />
</fieldset>
</form>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Check forms With JavaScript 1
In javascript, XML File Create, File Save 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
IE/Firefox XHTML Strict 7
Form won't go to "thank you" page when submitted. 17
Decrypting in Javascript 8
Help with code 0

Members online

Total: 36 (members: 3, guests: 33)
Robots: 458

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top