Form

[shapper]

Hello,

I have the following form:
http://flyonpages.flyondreams.pt/form.html

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>
</div>

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

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,
Miguel

 

[Jukka K. Korpela]

I have the following form:
http://flyonpages.flyondreams.pt/form.html

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.

I styled the error because I need the error to have that look (Might
change the colors).

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
http://www.cs.tut.fi/~jkorpela/css-caveats.html

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

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

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

Similar considerations apply.

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

Well, yes... but...

I think this structure is ok ... correct?

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