Connecting Tech Pros Worldwide Forums | Help | Site Map

XHTML Strict and Javascript Form Validation

Robert Smith
Guest
 
Posts: n/a
#1: Jul 23 '05
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.va lue == "") {
alert ('Please enter your first name.');
document.getElementById("feedback").first_name.foc us()
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?

--
-Robert Smith
-------------------------------------------------------------------------------------------------------------
Remove 'nospam.' from my email address if you wish to reply via email.



RobG
Guest
 
Posts: n/a
#2: Jul 23 '05

re: XHTML Strict and Javascript Form Validation


Robert Smith wrote:[color=blue]
> 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:[/color]
[...]

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_na me.value);
} else {
alert('eEBI doesn\'t work');
}
">
</form>
</body>
</html>

--
Rob
Michael Winter
Guest
 
Posts: n/a
#3: Jul 23 '05

re: XHTML Strict and Javascript Form Validation


On Tue, 30 Nov 2004 06:45:25 GMT, RobG <rgqld@iinet.net.auau> wrote:
[color=blue]
> Robert Smith wrote:
>[color=green]
>> 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:[/color]
> [...]
>
> 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.[/color]

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]
[color=blue]
> <form action="" id="feedback">[/color]

[snip]
[color=blue]
> if(document.getElementById('feedback')) {[/color]

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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Robert Smith
Guest
 
Posts: n/a
#4: Jul 23 '05

re: XHTML Strict and Javascript Form Validation



"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote in message
news:opsh9yzed6x13kvk@atlantis...[color=blue]
> On Tue, 30 Nov 2004 06:45:25 GMT, RobG <rgqld@iinet.net.auau> wrote:
>[color=green]
>> Robert Smith wrote:
>>[color=darkred]
>>> 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:[/color]
>> [...]
>>
>> 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.[/color]
>
> 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]
>[color=green]
>> <form action="" id="feedback">[/color]
>
> [snip]
>[color=green]
>> if(document.getElementById('feedback')) {[/color]
>
> 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[/color]

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.foc us()
return false;

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


Closed Thread


Similar JavaScript / Ajax / DHTML bytes