| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <!-- $Id$ --> |
| <html> |
| <head> |
| <title>ValidField</title> |
| <link rel="stylesheet" type="text/css" href="Tapestry.css" title="style"> |
| </head> |
| |
| <body> |
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> |
| <tr> |
| <td align="left"><A href="Upload.html"><IMG alt=Upload src="common-images/prev.png"></a></td> |
| <td align="right"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| <tr> |
| <tr> |
| <td colspan="2"><hr></td> |
| </tr> |
| <tr> |
| <td colspan="2"> |
| <table border="0" cellpadding="4" cellspacing="4" width="100%"> |
| |
| <tr valign="top"> |
| <td> |
| <table> |
| <tr> |
| <td><font size="+2"><b>ValidField</b></font></td> |
| </tr> |
| <tr> |
| <td> |
| <A href="../api/org/apache/tapestry/valid/ValidField.html"> |
| org.apache.tapestry.valid.ValidField</a> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td> |
| <table align="right" valign="middle" bgcolor="#c0c0c0" cellpadding="8"> |
| <tr> |
| <td><b>Age</b></td><td><input style="BACKGROUND: yellow"></td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| |
| <tr valign="center"> |
| <td colspan="2"> </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Description</b> |
| <br> |
| Provides an extended <a href="TextField.html">TextField</a> that performs |
| automated validation and conversion of user entered text into typed Objects. |
| The ValidField component is rendered as a HTML <input type="text"> field |
| and must be wrapped by a <a href="Form.html">Form</a> component. |
| <p> |
| Each ValidField is configured with a |
| <A href="../api/org/apache/tapestry/valid/IValidator.html">validator</a> which |
| checks the correctness of the user's input and performs the input text to |
| java Object translations. The <a href="Form.html">Form</a> tracks the state of |
| all its ValidFields using a validation |
| <a href="../api/org/apache/tapestry/valid/ValidationDelegate.html">delegate</a>. |
| Using the validation delegate you can determine whether all the form's fields |
| are valid and inform the user of any validation errors. |
| <p> |
| There are number of pluggable validators you can assign to a ValidField |
| including: |
| <ul> |
| <li> |
| <A href="../api/org/apache/tapestry/valid/DateValidator.html">DateValidator</a> |
| - validates date strings and allows a minimum and maximum date range to be set |
| </li> |
| <li> |
| <A href="../api/org/apache/tapestry/valid/EmailValidator.html">EmailValidator</a> |
| - validates email strings and allows a minimum and maximum length to be set |
| </li> |
| <li> |
| <A href="../api/org/apache/tapestry/valid/NumberValidator.html">NumberValidator</a> |
| - validates number strings and allows a minimum and maximum values to be set |
| </li> |
| <li> |
| <A href="../api/org/apache/tapestry/valid/PatternValidator.html">PatternValidator</a> |
| - validates text for a specified pattern |
| </li> |
| <li> |
| <A href="../api/org/apache/tapestry/valid/StringValidator.html">StringValidator</a> |
| - validates string values and allows a minimum length to be set |
| </li> |
| </ul> |
| The ValidField's |
| <A href="../api/org/apache/tapestry/valid/BaseValidator.html">BaseValidator</a> |
| classes automatically provide powerful client-side JavaScript field validation |
| when their parent <a href="Form.html">Form</a> is posted. |
| Validator client scripting is disabled by default. To enable the client |
| scripting explicitly set the "clientScriptingEnabled" property to true in |
| each validator. For example: |
| <pre> |
| <bean name="emailValidator" class="org.apache.tapestry.valid.EmailValidator"> |
| <set-property name="<b>clientScriptingEnabled</b>" expression="true"/> |
| <set-property name="minimumLength" expression="8"/> |
| <set-property name="required" expression="true"/> |
| </bean> |
| </pre> |
| <p> |
| Note if a form includes a "Cancel" style submit button, the cancel button will |
| need to set the form's <tt>onsubmit</tt> event handler to null, so that the |
| JavaScript field validation is not invoked when the form is submitted. |
| For example: |
| <pre> |
| <input jwcid="@<a href="Submit.html">Submit</a>" listener="ognl:listeners.okSubmit" type="Submit" value=" OK "/> |
| <input jwcid="@<a href="Submit.html">Submit</a>" listener="ognl:listeners.cancelSubmit" type="Submit" value="Cancel" <b>onclick</b>="form.onsubmit = null;"/> |
| </pre> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>See Also</b> |
| <br> |
| <A href="FieldLabel.html">FieldLabel</a>, |
| <A href="Form.html">Form</a>, |
| <a href="TextArea.html">TextArea</a>, |
| <A href="TextField.html">TextField</a> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Parameters</b> |
| <br> |
| <table border=1 cellpadding="4" cellspacing="4" class="parameters"> |
| <tr> |
| <th>Name</th> |
| <th>Type</th> |
| <th>Direction</th> |
| <th>Required</th> |
| <th>Default</th> |
| <th>Description</th> |
| </tr> |
| <tr> |
| <td>value</td> |
| <td>Object</td> |
| <td>in-out</td> |
| <td>yes</td> |
| <td> </td> |
| <td> |
| The value to be displayed (on render), and updated (when the form is |
| submitted, if the submitted value is valid). The |
| <a href="../api/org/apache/tapestry/valid/IValidator.html"><tt>IValidator</tt></a> |
| converts between object values and Strings. |
| </td> |
| </tr> |
| <tr> |
| <td>validator</td> |
| <td> |
| <A href="../api/org/apache/tapestry/valid/IValidator.html"><tt>IValidator</tt></a> |
| </td> |
| <td>in</td> |
| <td>yes</td> |
| <td> </td> |
| <td> |
| Object used to convert object values to Strings (for renderring) |
| and to validate and convert Strings into object values (when the form |
| is submitted). |
| </td> |
| </tr> |
| <tr> |
| <td>displayName</td> |
| <td>String</td> |
| <td>in</td> |
| <td>yes</td> |
| <td> </td> |
| <td> |
| A textual name for the field that is used when formulating error messages. |
| Also used by the <A href="FieldLabel.html">FieldLabel</a> component to |
| properly label the field. |
| </td> |
| </tr> |
| <tr> |
| <td>hidden</td> |
| <td>boolean</td> |
| <td>in</td> |
| <td>no</td> |
| <td>false</td> |
| <td> |
| If true, then the text field is written as a <input type="password"> |
| form element. |
| </td> |
| </tr> |
| <tr> |
| <td>disabled</td> |
| <td>boolean</td> |
| <td>in</td> |
| <td>no</td> |
| <td>false</td> |
| <td> |
| Controls whether the text field is active or not. If disabled, then |
| any value that comes up when the form is submitted is ignored. Corresponds |
| to the "disabled" HTML attribute. |
| </td> |
| </tr> |
| </table> |
| <p>Body: <strong>removed</strong><br> |
| Informal parameters:<strong>allowed</strong><br> |
| Reserved parameters: "name", "type", "value" |
| </p> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Examples</b> |
| <p> |
| The ValidField is used in this example to provide an auction bidding page. A |
| custom |
| <a href="../api/org/apache/tapestry/valid/ValidationDelegate.html"><tt>ValidationDelegate</tt></a> |
| is used to render the invalid fiels as yellow. A custom ShowError component |
| is also used to display the first error message if any fields have errors. |
| <p> |
| For a more extensive example see the |
| <a href="../Tutorial/workbench.html">Tapestry Workbench</a>. The Fields |
| example in the Workbench also illustrates how to use the |
| <a href="FieldLabel.html">FieldLabel</a> component to high light invalid |
| fields. |
| <p> |
| |
| <form> |
| <table class="examples" cellpadding="2"> |
| <tr> |
| <td colspan="2"><font color="navy" size="+2"><i><b>Regal Auctions Bid Page</b></i></font></td> |
| </tr> |
| <tr> |
| <td colspan="2"><hr></td> |
| </tr> |
| <tr> |
| <td colspan="2"><font color="red">Bid Amount must be greater than 10.0</font></td> |
| </tr> |
| <tr> |
| <td>Lot Number</td><td><input type="text" size="4" maxlength="4" value="23"/></td> |
| </tr> |
| <tr> |
| <td>Bid Amount</td><td><input type="text" size="7" maxlength="7" value="9.99" style="background:yellow"/></td> |
| </tr> |
| <tr> |
| <td>Full Name</td><td><input type="text" size="25" maxlength="30" value="Peter McHolder"/></td> |
| </tr> |
| <tr> |
| <td>Email</td><td><input type="text" size="25" maxlength="30" value="pmcholder2@hotmail.com"/></td> |
| </tr> |
| <tr> |
| <td>Telphone</td><td><input type="text" size="25" maxlength="12" style="background:yellow"/></td> |
| </tr> |
| <tr> |
| <td colspan="2" align="right"> |
| <input type="Submit" value=" OK "> |
| <input type="Submit" value="Cancel"> |
| </td> |
| </tr> |
| </table> |
| </form> |
| |
| <pre> |
| |
| <form jwcid="@<A href="Form.html">Form</A>" delegate="ognl:beans.delegate"><br><table class="examples" cellpadding="2"><br><tr><br> <td colspan="2"><span class="title">Regal Auctions Bid Page</span></td><br></tr><br><tr><br> <td colspan="2"><hr></td><br></tr><br><tr><br> <td colspan="2"><span jwcid="@ShowError" delegate="ognl:beans.delegate"/></td><br></tr><br><tr><br> <td><span jwcid="@<A href="FieldLabel.html">FieldLabel</A>" field="ognl:components.lotNoField">Lot Number</span></td><td><input jwcid="lotNoField" type="text" size="4" maxlength="4"/></td><br></tr><br><tr><br> <td><span jwcid="@<A href="FieldLabel.html">FieldLabel</A>" field="ognl:components.bidAmountField">Bid Amount</span></td><td><input jwcid="bidAmountField" type="text" size="7" maxlength="7"/></td><br></tr><br><tr><br> <td><span jwcid="@<A href="FieldLabel.html">FieldLabel</A>" field="ognl:components.fullNameField">Full Name</span></td><td><input jwcid="fullNameField" type="text" size="25" maxlength="30"/></td><br></tr><br><tr><br> <td><span jwcid="@<A href="FieldLabel.html">FieldLabel</A>" field="ognl:components.emailField">Email</span></td><td><input jwcid="emailField" type="text" size="25" maxlength="30"/></td><br></tr><br><tr><br> <td><span jwcid="@<A href="FieldLabel.html">FieldLabel</A>" field="ognl:components.telephoneField">Telephone</span></td><td><input jwcid="telephoneField" type="text" size="25" maxlength="30"/></td><br></tr><br><tr><br> <td colspan="2" align="right"><br> <input jwcid="@Submit" listener="ognl:listeners.okSubmit" type="Submit" value=" OK "/><br> <input jwcid="@Submit" listener="ognl:listeners.cancelSubmit"onclick="form.onsubmit = null;"/><br> </td><br></tr><br></table><br></form><br> |
| |
| <property-specification name="lotBid" type="com.mycorp.LotBid" persistent="yes" initial-value="new com.mycorp.LotBid()"/><br><property-specification name="actionDetails" type="com.mycorp.ActionDetails" persistent="yes"/><br> |
| <bean name="delegate" class="com.mycorp.FormValidationDelegate"/> |
| |
| <bean name="lotNoValidator" class="<A href="../api/org/apache/tapestry/valid/NumberValidator.html">org.apache.tapestry.valid.NumberValidator</a>"> |
| <set-property name="required" expression="true"/> |
| <set-property name="minimum" expression="1"/> |
| <set-property name="maximum" expression="auctionDetails.numberLots"/> |
| <set-property name="valueType">"int"</set-property> |
| </bean> |
| |
| <bean name="bidAmountValidator" class="<A href="../api/org/apache/tapestry/valid/NumberValidator.html">org.apache.tapestry.valid.NumberValidator</a>"> |
| <set-property name="required" expression="true"/> |
| <set-property name="minimum" expression="auctionDetails.minBid"/> |
| <set-property name="maximum" expression="auctionDetails.maxBid"/> |
| <set-property name="valueType">"float"</set-property> |
| </bean> |
| |
| <bean name="fullNameValidator" class="<A href="../api/org/apache/tapestry/valid/StringValidator.html">org.apache.tapestry.valid.StringValidator</a>"> |
| <set-property name="required" expression="true"/> |
| <set-property name="minimumLength" expression="3"/> |
| </bean> |
| |
| <bean name="emailValidator" class="<A href="../api/org/apache/tapestry/valid/StringValidator.html">org.apache.tapestry.valid.StringValidator</a>"> |
| <set-property name="required" expression="true"/> |
| <set-property name="minimumLength" expression="12"/> |
| </bean> |
| |
| <bean name="telephoneValidator" class="<A href="../api/org/apache/tapestry/valid/StringValidator.html">org.apache.tapestry.valid.StringValidator</a>"> |
| <set-property name="required" expression="true"/> |
| <set-property name="minimumLength" expression="11"/> |
| </bean> |
| |
| <component id="<span class="jwcid">lotNoField</span>" type="<A href="ValidField.html">ValidField</a>"> |
| <binding name="value" expression="lotBid.lotNo"/> |
| <binding name="validator" expression="beans.lotNoValidator"/> |
| <static-binding name="displayName" value="Lot Number"/> |
| </component> |
| |
| <component id="<span class="jwcid">bidAmountField</span>" type="<A href="ValidField.html">ValidField</a>"> |
| <binding name="value" expression="lotBid.bidAmount"/> |
| <binding name="validator" expression="beans.bidAmountNoValidator"/> |
| <static-binding name="displayName" value="Bid Amount"/> |
| </component> |
| |
| <component id="<span class="jwcid">fullNameField</span>" type="<A href="ValidField.html">ValidField</a>"> |
| <binding name="value" expression="lotBid.bidderName"/> |
| <binding name="validator" expression="beans.fullNameValidator"/> |
| <static-binding name="displayName" value="Full Name"/> |
| </component> |
| |
| <component id="<span class="jwcid">emailField</span>" type="<A href="ValidField.html">ValidField</a>"> |
| <binding name="value" expression="lotBid.bidderEmail"/> |
| <binding name="validator" expression="beans.emailValidator"/> |
| <static-binding name="displayName" value="Email"/> |
| </component> |
| |
| <component id="<span class="jwcid">telephoneField</span>" type="<A href="ValidField.html">ValidField</a>"> |
| <binding name="value" expression="lotBid.bidderTelephone"/> |
| <binding name="validator" expression="beans.telephoneValidator"/> |
| <static-binding name="displayName" value="Telephone"/>; |
| </component> |
| |
| |
| public abstract class LotBidPage extends BasePage { |
| public abstract LotBid getLotBid(); |
| |
| public abstract void setLotBid(LotBid value); |
| public asbtract AuctionDetails getAuctionDetails(); |
| |
| public abstract void setAuctionDetails(AuctionDetails value); |
| |
| public void okSubmit(IRequestCycle cycle) { |
| ValidationDelegate delegate = (ValidationDelegate) |
| getBeans().getBean("delegate"); |
| |
| // If no errors process the bid, otherwise stay on this page and |
| // let the fields show their errors. |
| if (!delegate.getHasErrors()) |
| // Save the lot bid to the database. |
| .. |
| |
| // Go to the confirmation page. |
| cycle.activate("BidConfirmPage"); |
| } |
| } |
| |
| public void cancelSubmit(IRequestCycle cycle) { |
| cycle.activate("AuctionListPage"); |
| } |
| } |
| |
| public class LotBid implements Serializable { |
| private int lotNo; |
| private float bidAmount; |
| private String bidderName; |
| private String bidderEmail; |
| private String bidderTelephone; |
| |
| public int getLotNo() { return lotNo; } |
| |
| public void setLotNo(int value) { |
| lotNo = value; |
| } |
| |
| public float getBidAmount() { return bidAmount; } |
| |
| public void setBidAmount(float value) { |
| bidAmount = value; |
| } |
| |
| public float getBidderName() { return bidderName; } |
| |
| public void setBidderName(String value) { |
| bidderName = value; |
| } |
| |
| public float getBidderEmail() { return bidderEmail; } |
| |
| public void setBidderEmail(String value) { |
| bidderEmail = value; |
| } |
| |
| public float getBidderTelephone() { return bidderTelephone; } |
| |
| public void setBidderTelephone(String value) { |
| bidderTelephone = value; |
| } |
| } |
| |
| public class AuctionDetails implements Serializable { |
| private int numberLots; |
| private float minBid; |
| private float maxBid; |
| |
| public AuctionDetails(int numberLots, float minBid, float maxBid) { |
| this.numberLots = numberLots; |
| this.minBid = minBid; |
| this.maxBid = maxBid; |
| } |
| |
| public int getNumberLots() { return numberLots; } |
| |
| public float getMinBid() { return minBid; } |
| |
| public float getMaxBid() { return maxBid; } |
| } |
| </pre> |
| </td> |
| </tr></table> |
| </td></tr> |
| <tr> |
| <td colspan="2"><hr></td> |
| </tr> |
| <tr> |
| <td align="left"><A href="Upload.html"><IMG alt=Upload src="common-images/prev.png"></a></td> |
| <td align="right"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| </tr> |
| </table> |
| |
| </body> |
| </html> |
