Accessing Class

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rockoyster
    #1

    Accessing Class

    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=="ma ndatory"

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

    In HTML I have for example ...

    <input class="mandator y" 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.classN ame);
    ......

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

    Can anyone suggest what I'm doing wrong?

    Cheers.
    rockoyster


    Tags: None
    • David Dorward
      #2
      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=="ma ndatory"[/color]
      [color=blue]
      > <input class="mandator y" name="fax" type="text" id="fax" />[/color]
      [color=blue]
      > alert (tempobj.name);
      > alert (tempobj.classN ame);[/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="mandator y" name="fax" type="text" id="fax"></div>
      <script type="text/javascript">
      el = document.getEle mentById('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.javas cript. 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

        Comment

        • Michael Winter
          #3
          Re: Accessing Class

          On Sat, 29 Jan 2005 07:02:09 GMT, rockoyster <rockoyster5@ho tmail.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.javas cript.
          [color=blue]
          > [...] check for fileds with .className=="ma ndatory"[/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+)mandator y($|\s+)/.test(element.c lassName)) {
          /* '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.

            Comment

            • rockoyster
              #4
              Re: Accessing Class


              "Michael Winter" <M.Winter@bluey onder.co.invali d> 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



                Comment

                Previous template Next
                Working...