XHTML Strict and Javascript Form Validation

Robert Smith · Nov 30, 2004

I have a very basic form validation script, which wont work due to XHTML
Strict not allowing me to use the name attribute on a form. Here is part of
my code:

if (document.feedback.first_name.value == "") {
alert ('Please enter your first name.');
document.feedback.first_name.focus()
return false;
}

So I figured I'd use the id attribute instead of the name attribute, like
so:

if (document.getElementById("feedback").first_name.value == "") {
alert ('Please enter your first name.');
document.getElementById("feedback").first_name.focus()
return false;
}

which works in Mozilla, but not Internet Explorer. Internet Explorer just
ignores it and submits an invalid form. What am I supposed to do?

RobG · Nov 30, 2004

Robert said:
I have a very basic form validation script, which wont work due to XHTML
Strict not allowing me to use the name attribute on a form. Here is part of
my code:

[...]

The following works in both Firefox and IE. I tried changing the id
attribute of the input to a name attribute and it still worked fine.
So I guess this is one of those "can't replicate the problem" problems.

The obvious one is that attribute names must be lower case, but I'm
sure you'd have that covered. Here is the W3C description of the
differences between HTML and XHTML:

<URL:http://www.w3.org/TR/xhtml1/#diffs>

I assume I got the doctype correct? You didn't say exactly which one
you are using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>XHTML test</title>
</head><body>
<form action="" id="feedback">
<input type="text" id="first_name" value="rob">first name<br>
<input type="button" value="click test" onclick="
if(document.getElementById('feedback')) {
alert(document.getElementById('feedback').first_name.value);
} else {
alert('eEBI doesn\'t work');
}
">
</form>
</body>
</html>

Michael Winter · Nov 30, 2004

Robert said:
Robert said:

I have a very basic form validation script, which wont work due to
XHTML Strict not allowing me to use the name attribute on a form. Here
is part of my code:

Click to expand...

[...]

The following works in both Firefox and IE. I tried changing the
id attribute of the input to a name attribute and it still worked
fine. So I guess this is one of those "can't replicate the
problem" problems.

I think you misunderstand. The name attribute is perfectly acceptable on a
form *control*, and if you intend to submit the data that control
contains, it *must* be specified just as must with HTML. The name
attribute on the form element is the problem as XHTML Strict doesn't allow
it.

In fact, name attributes are only allowed on images, forms and links for
backwards compatibility with old browsers like NN4 which were written
before the introduction of the id attribute. Unless you care about them,
the name attribute should *only* be used for form controls.

[snip]

<form action="" id="feedback">
[snip]

if(document.getElementById('feedback')) {

You don't need to use getElementById. The forms collection can be
subscripted with numbers, names, or ids. With a string subscript[1], the
user agent will attempt to find a matching id first. Only if that fails
will a name look-up be performed.

document.forms['feedback'].elements['first_name']

[snip]

Mike

[1] Every expression inside square brackets is treated as a string,
including numeric literals and object references. However, if the string
can be converted to a number, then back to a string, and still match the
original value exactly, it is considered to be an array index, not a
property. So:

'10' -> 10 -> '10' '10' array index
'05' -> 5 -> '5' '05' property name
'fg' -> NaN -> 'NaN' 'fg' property name

Robert Smith · Dec 1, 2004

Michael Winter said:
Robert said:

I have a very basic form validation script, which wont work due to
XHTML Strict not allowing me to use the name attribute on a form. Here
is part of my code:

Click to expand...

[...]

The following works in both Firefox and IE. I tried changing the
id attribute of the input to a name attribute and it still worked
fine. So I guess this is one of those "can't replicate the
problem" problems.

Click to expand...

I think you misunderstand. The name attribute is perfectly acceptable on a
form *control*, and if you intend to submit the data that control
contains, it *must* be specified just as must with HTML. The name
attribute on the form element is the problem as XHTML Strict doesn't allow
it.

In fact, name attributes are only allowed on images, forms and links for
backwards compatibility with old browsers like NN4 which were written
before the introduction of the id attribute. Unless you care about them,
the name attribute should *only* be used for form controls.

[snip]

<form action="" id="feedback">
[snip]

if(document.getElementById('feedback')) {

Click to expand...

You don't need to use getElementById. The forms collection can be
subscripted with numbers, names, or ids. With a string subscript[1], the
user agent will attempt to find a matching id first. Only if that fails
will a name look-up be performed.

document.forms['feedback'].elements['first_name']

[snip]

Mike

Thankyou, the document.forms[] way worked. I actually used

document.forms['feedback'].first_name.focus()
return false;

but I can't figure out why

document.getElementById('feedback').first_name.focus()
return false;

doesn't work for me. Thanks for solving my problem though

Very Basic CC Validation Javascript	0	Oct 29, 2019
Form Validation and getElementById	3	Nov 18, 2004
javascript in xhtml problem	5	Jan 30, 2009
radiobutton form validation	1	Sep 25, 2007
Javascript Form Validation Issue	1	Aug 16, 2006
Batch form validation	5	Sep 1, 2006
Why is this WordPress comments form not submitting?	1	Jan 12, 2020
Valid XHTML strict autocomplete workaround/hack for IE and Mozilla	4	Aug 22, 2004

XHTML Strict and Javascript Form Validation

Robert Smith

RobG

Michael Winter

Robert Smith

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads