Custom design for required and invalid fields

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Custom design for required and invalid fields

Tambet Matiisen
Hi Orbeon!

We need to use custom design for required and invalid fields. There is
nice how-to in wiki to achieve that:
http://wiki.orbeon.com/forms/how-to/view/error-summary

Unfortunately we cannot use the exact techniques in this how-to, because
our design uses table-based layout for form fields. Something like this:

<xforms:group ref="somegroup">
<xhtml:table>
<xhtml:tr>
<xhtml:th>
<xforms:label for="d139e247">Field label</xforms:label>
</xhtml:th>
<xhtml:td>
<xforms:input id="d139e247" ref="somefield"/>
</xhtml:td>
</xhtml:tr>
     ...
</xhtml:table>
</xforms:group>

As you can imagine, the resulting HTML is not styleable with CSS, as
suggested in how-to, because label does not have parent element with
classes like xforms-required, xforms-invalid etc.

Now I've settled with displaying required icon next to field itself
instead of label. But what are my options, when I would like to display
the required icon next to label and paint the label in red, if the field
is invalid?

Regards
Tambet


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: Custom design for required and invalid fields

Erik Bruchez
Administrator
Tambet,

The key to styling the separate label element would be to have
validity-related CSS classes directly on the label element produced in
the resulting HTML. But Orbeon currently doesn't place such classes.
So I don't think it will be possible without making changes to Orbeon
Forms.

-Erik

On Tue, Aug 23, 2011 at 6:32 AM, Tambet Matiisen
<[hidden email]> wrote:

> Hi Orbeon!
>
> We need to use custom design for required and invalid fields. There is nice
> how-to in wiki to achieve that:
> http://wiki.orbeon.com/forms/how-to/view/error-summary
>
> Unfortunately we cannot use the exact techniques in this how-to, because our
> design uses table-based layout for form fields. Something like this:
>
> <xforms:group ref="somegroup">
> <xhtml:table>
> <xhtml:tr>
> <xhtml:th>
> <xforms:label for="d139e247">Field label</xforms:label>
> </xhtml:th>
> <xhtml:td>
> <xforms:input id="d139e247" ref="somefield"/>
> </xhtml:td>
> </xhtml:tr>
>    ...
> </xhtml:table>
> </xforms:group>
>
> As you can imagine, the resulting HTML is not styleable with CSS, as
> suggested in how-to, because label does not have parent element with classes
> like xforms-required, xforms-invalid etc.
>
> Now I've settled with displaying required icon next to field itself instead
> of label. But what are my options, when I would like to display the required
> icon next to label and paint the label in red, if the field is invalid?
>
> Regards
> Tambet
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing
> list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> OW2 mailing lists service home page: http://www.ow2.org/wws
>
>


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws