Accessing Class

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rockoyster - 29 Jan 2005 07:02 GMT

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

Reply to this Message

David Dorward - 29 Jan 2005 10:18 GMT

> Not sure if this is entirely a CSS issue but I have defined the class
> below in CSS.

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".

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

news://comp.lang.javascript would be a better place to ask.

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

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

> alert (tempobj.name);
> alert (tempobj.className);

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

With the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Class & JS</title>
<h1>Class & 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.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Michael Winter - 29 Jan 2005 10:19 GMT

[snip]

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

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.

> [...] check for fileds with .className=="mandatory"

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 */
}

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

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

[snip]

Mike

Signature

Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Reply to this Message

rockoyster - 30 Jan 2005 05:08 GMT

"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote
<<snip>>

> 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:

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2005

Accessing Class