Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have the following form:

I styled the error because I need the error to have that look (Might
change the colors).
And I need the error message to be under the input.
Associated to some inputs I might display some comments.

Is it correct to use the following for the error:
      <div class="Error">
      <span>The name is required</span>

And the following for the comment:
      <div class="Comment">
    <span>Some extra comments needed</span>

Inside the comment if have more then one line or some list I can use P
or UL/OL

I think this structure is ok ... correct?

Thank you,

Re: Form

shapper wrote:

Quoted text here. Click to load it

Thanks for posting a URL and having validated the markup &c.! It's much
easier to look at an issue presented that way.

There's still a fundamental problem in the markup.

Quoted text here. Click to load it

That's OK. But the problem is that the error message is a static part of the
document. This means, in particular, that it appears whenever your CSS code
intended to hide it does not have the desired effect. This may happen for a
multitude of reasons, see

Quoted text here. Click to load it

The markup as such is correct, even though the span element is redundant. It
might be needed for some types of styling, though. (For instance, to create
a background color that extends over the text but not full-width, a
"redundant" span is the practical tool.)

Quoted text here. Click to load it

Similar considerations apply.

Quoted text here. Click to load it

Well, yes... but...

Quoted text here. Click to load it

Well, yes... but...

Since CSS is for optional presentational suggestions only, it should not be
relied upon in crucial matters, like informing the user about an error.

If the error is detected server-side, the server should generate the error
message when applicable.

If the error is detected client-side, the JavaScript code used to detect it
should generate the error message. In the old days, document.write() was
used. In modern days, you would use innerHTML, and then you might, for
simplicity, have

<div class="Error" id="foo-error"></div>

as a static part of the document (should not cause harm, when the textual
content is empty). Then you would use
document.getElementById('foo-error').innerHTML = '...' to set the error
message (and similarly for an explanation).


Site Timeline