Connecting Tech Pros Worldwide Forums | Help | Site Map

Accessing Class

rockoyster
Guest
 
Posts: n/a
#1: Jul 21 '05
Not sure if this is entirely a CSS issue but I have defined the class below
in CSS.

If I am stretching the friendship then I apologise in advance.

I am trying to write a javascript script to check that all required fields
in a form are entered.

The idea was to give all required input fields a class of say "mandatory"
and then check for fileds with .className=="mandatory"

But ... the class does not seem to be accessible

In HTML I have for example ...

<input class="mandatory" name="fax" type="text" id="fax" />

To test in javascript I have set tempobj to point at the element then
......
alert (tempobj.name);
alert (tempobj.className);
......

the first alert displays "fax"
the second alert displays null.

Can anyone suggest what I'm doing wrong?

Cheers.
rockoyster



David Dorward
Guest
 
Posts: n/a
#2: Jul 21 '05

re: Accessing Class


rockoyster wrote:
[color=blue]
> Not sure if this is entirely a CSS issue but I have defined the class
> below in CSS.[/color]

To be picky about the subject; classes are defined in (X)HTML. CSS has
selectors which include a way to say "If the element has such and such
class".
[color=blue]
> I am trying to write a javascript script to check that all required fields
> in a form are entered.[/color]

news://comp.lang.javascript would be a better place to ask.
[color=blue]
> The idea was to give all required input fields a class of say "mandatory"
> and then check for fileds with .className=="mandatory"[/color]
[color=blue]
> <input class="mandatory" name="fax" type="text" id="fax" />[/color]
[color=blue]
> alert (tempobj.name);
> alert (tempobj.className);[/color]
[color=blue]
> the first alert displays "fax"
> the second alert displays null.[/color]

With the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Class &amp; JS</title>
<h1>Class &amp; JS</h1>
<div><input class="mandatory" name="fax" type="text" id="fax"></div>
<script type="text/javascript">
el = document.getElementById('fax');
window.alert(el.name);
window.alert(el.className);
</script>

It works fine, and the class name is displayed. This really is a JS question
and has nothing to do with style sheets. You should try
comp.lang.javascript. It would also be a good idea to post a URI to the
complete webpage. Code fragments are all very well for narrowing down where
you think the problem lies, but when you're wrong its not very helpful.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Michael Winter
Guest
 
Posts: n/a
#3: Jul 21 '05

re: Accessing Class


On Sat, 29 Jan 2005 07:02:09 GMT, rockoyster <rockoyster5@hotmail.com>
wrote:

[snip]
[color=blue]
> If I am stretching the friendship then I apologise in advance.[/color]

I'm afraid it is. This has nothing to do with style sheets on the Web, but
Web scripting. It should have been posted to comp.lang.javascript.
[color=blue]
> [...] check for fileds with .className=="mandatory"[/color]

Such a test is incorrect. It might work for the moment, but it isn't very
forward-thinking: the class attribute is a space separated list. You
should check that the attribute *contains* the value. The safest way would
be with a regular expression, allowing you to assert that you won't be
performing substring matches unintentionally:

if(/(^|\s+)mandatory($|\s+)/.test(element.className)) {
/* 'element' is mandatory */
}
[color=blue]
> But ... the class does not seem to be accessible[/color]

Please post a link to an example and state with what user agent(s) you
experience this problem.

[snip]

Mike

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

re: Accessing Class



"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote
<<snip>>[color=blue]
> Such a test is incorrect. It might work for the moment, but it isn't very
> forward-thinking: the class attribute is a space separated list. You
> should check that the attribute *contains* the value. The safest way would
> be with a regular expression, allowing you to assert that you won't be
> performing substring matches unintentionally:[/color]

Despite having posted to the wrong group I was pleased to receive some very
helpful feedback along with the mild (and thoroughly deserved) chastisement.

I am indebted to Michael who's insightful comments alerted me to how
perverse my proposed use of the class attribute was. Seemed like a good
idea at the time.

The problem went away once I decided to use a more rational and maintainable
solution _and_ I learnt how to correctly use the className property in
Javascript!

rockoyster



Closed Thread