You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Izak Wessels <po...@gmail.com> on 2006/02/13 22:54:24 UTC
Applying CSS to Validators
Hello all,
I have recently implemented validators on one of my pages, and it works
great. Only problem I am having
is that it prints out the error message in black, which doesn't really draw
the attention to the user as much
as I want it to.
1. <component id="QuotedPrice" type="TextField">
2. <binding name="value" value="QuotedPrice"/>
3. <binding name="translator" value="translator:number,pattern=#.#"/>
4. <binding name="validators" value="validators:required[You must
enter {0}!],min=1"/>
5. <binding name="displayName" value="literal:Quoted
Price"/>
6. </component>
Anybody know if I might embed a kind of CSS or even an HTML <font
colour=red> inside line 4?
I have tried :
<binding name="validators" value="validators:required[<font color=red>You
must enter {0}!]</font>,min=1"/>
but it didn't like it.
Thanks
-- Izak
Re: Applying CSS to Validators
Posted by Izak Wessels <po...@gmail.com>.
Adam,
Heh, figured it out about 2 minutes after my post, but thanks for the other
tips :)
-- Izak
On 2/14/06, Adam Zimowski <zi...@gmail.com> wrote:
>
> Hi Izak. Yes, you can do this pretty easily. I output my validator
> messages with <i> tags. You bind your validators as normal:
>
> <component id="zipCode" type="TextField">
> <binding name="value" value="value"/>
> <binding name="validators"
>
> value="validators:required,pattern=\d{5},$zipCodeValidator"/>
> <binding name="displayName" value="literal:Zip Code"/>
> </component>
>
> Then, page specifications you bind delegate to the form:
>
> <component id="regForm" type="Form">
> <binding name="listener" value="listener:onSubmit"/>
> <binding name="delegate" value="beans.delegate"/>
> <binding name="clientValidationEnabled" value="false"/>
> </component>
>
> and finally in the same page spec you define your error(s):
>
> <component id="error1" type="Delegator">
> <binding name="delegate"
> value="beans.delegate.currentFieldTracking.errorRenderer"/>
> </component>
> <component id="isInError1" type="If">
> <binding name="condition"
> value="beans.delegate.currentFieldTracking.inError"/>
> </component>
>
> Then, in my HTML template I display the error right below the field:
>
> <span jwcid="question6">
> <!-- preview -->
> Zip Code: <p/>
> <input type="text"/>
> <!-- preview -->
> </span>
> <span jwcid="isInError6">
> <br/><i><span jwcid="error6">Error: Zip Code</span></i>
> </span>
>
> Of course, this is one of many ways it can be done. Often people
> display only first error, or all of them at once, or as I did here,
> next to the offending field.
>
> Hope it helps
>
> -adam
>
> On 2/13/06, Izak Wessels <po...@gmail.com> wrote:
> > Hello all,
> >
> > I have recently implemented validators on one of my pages, and it works
> > great. Only problem I am having
> > is that it prints out the error message in black, which doesn't really
> draw
> > the attention to the user as much
> > as I want it to.
> >
> > 1. <component id="QuotedPrice" type="TextField">
> > 2. <binding name="value" value="QuotedPrice"/>
> > 3. <binding name="translator"
> value="translator:number,pattern=#.#"/>
> > 4. <binding name="validators" value="validators:required[You must
> > enter {0}!],min=1"/>
> > 5. <binding name="displayName" value="literal:Quoted
> > Price"/>
> > 6. </component>
> >
> >
> > Anybody know if I might embed a kind of CSS or even an HTML <font
> > colour=red> inside line 4?
> > I have tried :
> >
> > <binding name="validators" value="validators:required[<font
> color=red>You
> > must enter {0}!]</font>,min=1"/>
> >
> > but it didn't like it.
> >
> > Thanks
> >
> > -- Izak
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>
Re: Applying CSS to Validators
Posted by Adam Zimowski <zi...@gmail.com>.
Hi Izak. Yes, you can do this pretty easily. I output my validator
messages with <i> tags. You bind your validators as normal:
<component id="zipCode" type="TextField">
<binding name="value" value="value"/>
<binding name="validators"
value="validators:required,pattern=\d{5},$zipCodeValidator"/>
<binding name="displayName" value="literal:Zip Code"/>
</component>
Then, page specifications you bind delegate to the form:
<component id="regForm" type="Form">
<binding name="listener" value="listener:onSubmit"/>
<binding name="delegate" value="beans.delegate"/>
<binding name="clientValidationEnabled" value="false"/>
</component>
and finally in the same page spec you define your error(s):
<component id="error1" type="Delegator">
<binding name="delegate"
value="beans.delegate.currentFieldTracking.errorRenderer"/>
</component>
<component id="isInError1" type="If">
<binding name="condition"
value="beans.delegate.currentFieldTracking.inError"/>
</component>
Then, in my HTML template I display the error right below the field:
<span jwcid="question6">
<!-- preview -->
Zip Code: <p/>
<input type="text"/>
<!-- preview -->
</span>
<span jwcid="isInError6">
<br/><i><span jwcid="error6">Error: Zip Code</span></i>
</span>
Of course, this is one of many ways it can be done. Often people
display only first error, or all of them at once, or as I did here,
next to the offending field.
Hope it helps
-adam
On 2/13/06, Izak Wessels <po...@gmail.com> wrote:
> Hello all,
>
> I have recently implemented validators on one of my pages, and it works
> great. Only problem I am having
> is that it prints out the error message in black, which doesn't really draw
> the attention to the user as much
> as I want it to.
>
> 1. <component id="QuotedPrice" type="TextField">
> 2. <binding name="value" value="QuotedPrice"/>
> 3. <binding name="translator" value="translator:number,pattern=#.#"/>
> 4. <binding name="validators" value="validators:required[You must
> enter {0}!],min=1"/>
> 5. <binding name="displayName" value="literal:Quoted
> Price"/>
> 6. </component>
>
>
> Anybody know if I might embed a kind of CSS or even an HTML <font
> colour=red> inside line 4?
> I have tried :
>
> <binding name="validators" value="validators:required[<font color=red>You
> must enter {0}!]</font>,min=1"/>
>
> but it didn't like it.
>
> Thanks
>
> -- Izak
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org