You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2018/02/17 23:19:47 UTC
svn commit: r1025533 - in /websites/production/tapestry/content:
cache/main.pageCache forms-and-validation.html
Author: buildbot
Date: Sat Feb 17 23:19:46 2018
New Revision: 1025533
Log:
Production update by buildbot for tapestry
Modified:
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/forms-and-validation.html
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/forms-and-validation.html
==============================================================================
--- websites/production/tapestry/content/forms-and-validation.html (original)
+++ websites/production/tapestry/content/forms-and-validation.html Sat Feb 17 23:19:46 2018
@@ -120,11 +120,11 @@
<p> </p><p>Tapestry provides support for creating and rendering forms, populating their fields, and validating user input. For simple cases, input validation is declarative, meaning you simply tell Tapestry what validations to apply to a given field, and it takes care of it on the server and (optionally) on the client as well. In addition, you can provide event handler methods in your page or component classes to handle more complex validation scenarios.</p><p>Finally, Tapestry not only makes it easy to present errors messages to the user, but it can also automatically highlight form fields when validation fails.</p><p><strong>Contents</strong></p><p><style type="text/css">/*<![CDATA[*/
-div.rbtoc1518906045481 {padding: 0px;}
-div.rbtoc1518906045481 ul {list-style: disc;margin-left: 0px;}
-div.rbtoc1518906045481 li {margin-left: 0px;padding-left: 0px;}
+div.rbtoc1518909566916 {padding: 0px;}
+div.rbtoc1518909566916 ul {list-style: disc;margin-left: 0px;}
+div.rbtoc1518909566916 li {margin-left: 0px;padding-left: 0px;}
-/*]]>*/</style></p><div class="toc-macro rbtoc1518906045481">
+/*]]>*/</style></p><div class="toc-macro rbtoc1518909566916">
<ul class="toc-indentation"><li>Related Articles</li></ul>
<ul><li><a href="#FormsandValidation-TheFormComponent">The Form Component</a>
<ul class="toc-indentation"><li><a href="#FormsandValidation-FormEvents">Form Events</a></li><li><a href="#FormsandValidation-HandlingEvents">Handling Events</a></li><li><a href="#FormsandValidation-TrackingValidationErrors">Tracking Validation Errors</a></li><li><a href="#FormsandValidation-StoringDataBetweenRequests">Storing Data Between Requests</a></li><li><a href="#FormsandValidation-ConfiguringFieldsandLabels">Configuring Fields and Labels</a></li></ul>
@@ -215,7 +215,7 @@ public class Login {
</div></div><p> </p><h1 id="FormsandValidation-FormValidation"><span style="color: rgb(83,145,38);">Form Validation</span></h1><p>The above example is a very basic form which allows the fields to be empty. However, with a little more effort we can add client-side validation to prevent the user from submitting the form with either field empty.</p><p>Validation in Tapestry involves associating one or more <em>validators</em> with a form element component, such as TextField or PasswordField. This is done using the <strong>validate</strong> parameter:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"><t:textfield t:id="userName" validate="required" t:mixins="formgroup"/>
<t:passwordfield t:id="password" value="password" validate="required" t:mixins="formgroup"/></pre>
-</div></div><h2 id="FormsandValidation-AvailableValidators"><span style="color: rgb(83,145,38);">Available Validators</span></h2><p>Tapestry provides the following built-in validators:</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Validator</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Constraint Type</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Description</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Example</p></th></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>email</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Ensures that the given input looks like a valid e-mail address</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="email" validate="email" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>max<
/p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>long</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Enforces a maximum integer value</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="age" validate="max=120,min=0" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>maxLength</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>int</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value has a maximum length</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="zip" validate="maxlength=7" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>min</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>long</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Enforces a minimum integer value</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="ag
e" validate="max=120,min=0" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>minLength</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>int</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value has a minimum length</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="somefield" validate="minlength=1" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>none</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Does nothing (used to override a @Validate annotation)</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="somefield" validate="none" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>regexp</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>pattern</p></td><td colspan="1" rowspan="1"
class="confluenceTd"><p>Makes sure that a string value conforms to a given pattern</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="letterfield" validate="regexp=^</code><code>[A-Za-z]+$" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>required</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value is not null and not the empty string</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="name" validate="required" /></code></p></td></tr></tbody></table></div><h2 id="FormsandValidation-CentralizingValidationwith@Validate">Centralizing Validation with @Validate</h2><p>The @<a class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/beaneditor/Validate.html">Validate</a> annotation can take the place of the validate parameter of TextField
, PasswordField, TextArea and other components. When the validate parameter is not bound in the template file, the component will check for the @Validate annotation and use its value as the validation definition.</p><p>The annotation may be placed on the getter or setter method, or on the field itself.</p><p>Let's update the two fields of the Login page:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><h2 id="FormsandValidation-AvailableValidators"><span style="color: rgb(83,145,38);">Available Validators</span></h2><p>Tapestry provides the following built-in validators:</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Validator</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Constraint Type</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Description</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Example</p></th></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>email</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Ensures that the given input looks like a valid e-mail address</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="userEmail" validate="email" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>
max</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>long</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Enforces a maximum integer value</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="age" validate="max=120,min=0" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>maxLength</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>int</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value has a maximum length</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="zip" validate="maxlength=7" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>min</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>long</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Enforces a minimum integer value</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value
="age" validate="max=120,min=0" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>minLength</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>int</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value has a minimum length</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="somefield" validate="minlength=1" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>none</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Does nothing (used to override a @Validate annotation)</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="somefield" validate="none" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>regexp</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>pattern</p></td><td colspan="1" rowspan
="1" class="confluenceTd"><p>Makes sure that a string value conforms to a given pattern</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="letterfield" validate="regexp=^</code><code>[A-Za-z]+$" /></code></p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>required</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>–</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>Makes sure that a string value is not null and not the empty string</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p><code><t:textfield value="name" validate="required" /></code></p></td></tr></tbody></table></div><h2 id="FormsandValidation-CentralizingValidationwith@Validate">Centralizing Validation with @Validate</h2><p>The @<a class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/beaneditor/Validate.html">Validate</a> annotation can take the place of the validate parameter of TextF
ield, PasswordField, TextArea and other components. When the validate parameter is not bound in the template file, the component will check for the @Validate annotation and use its value as the validation definition.</p><p>The annotation may be placed on the getter or setter method, or on the field itself.</p><p>Let's update the two fields of the Login page:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> @Persist
@Property
@Validate("required")
@@ -224,11 +224,11 @@ public class Login {
@Property
@Validate("required")
private String password;</pre>
-</div></div><p>Now, we'll rebuild the app, refresh the browser, and just hit enter:</p><p><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-external-resource confluence-content-image-border image-center" width="500" src="https://cwiki-test.apache.org/confluence/download/attachments/22872109/newapp_com_example.png?version=3&modificationDate=1428088849000&api=v2" data-image-src="https://cwiki-test.apache.org/confluence/download/attachments/22872109/newapp_com_example.png?version=3&modificationDate=1428088849000&api=v2"></span></p><p>The form has updated, in place, to present the errors. You will not be able to submit the form until some value is provided for each field.</p><h2 id="FormsandValidation-HTML5Client-sideValidation">HTML5 Client-side Validation</h2><p>When the "tapestry.enable-html5-support" <a href="configuration.html">symbol</a> is set to true (it is <strong
><em>false</em></strong> by default), the Tapestry's built-in validators will automatically add the appropriate HTML5 "type" attributes to the rendered HTML of Tapestry's form components, triggering the HTML5 validation behavior built into most modern browsers. For example, if you use the "email" validator, like this:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"><t:textfield value="user.emailAddress" validate="email" /></pre>
+</div></div><p>Now, we'll rebuild the app, refresh the browser, and just hit enter:</p><p><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-external-resource confluence-content-image-border image-center" width="500" src="https://cwiki-test.apache.org/confluence/download/attachments/22872109/newapp_com_example.png?version=3&modificationDate=1428088849000&api=v2" data-image-src="https://cwiki-test.apache.org/confluence/download/attachments/22872109/newapp_com_example.png?version=3&modificationDate=1428088849000&api=v2"></span></p><p>The form has updated, in place, to present the errors. You will not be able to submit the form until some value is provided for each field.</p><h2 id="FormsandValidation-HTML5Client-sideValidation">HTML5 Client-side Validation</h2><p>When the <strong><code>tapestry.enable-html5-support</code></strong> <a href="configuration.html">symbol<
/a> is set to true (it is <strong><em>false</em></strong> by default), the Tapestry's built-in validators will automatically enable the HTML5-specific "type" and validation attributes to the rendered HTML of Tapestry's form components, triggering the HTML5 client-side validation behavior built into most modern browsers. For example, if you use the "email" and "required" validators, like this:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"><t:textfield validate="email,required" .../></pre>
</div></div><p>then the output HTML will look like this:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
-<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"><input type="email" ...></pre>
-</div></div><p>The following HTML5 validation behaviors are enabled:</p><ul><li>The "<strong>required</strong>" validator adds the "required" attribute to the rendered HTML</li><li>The "<strong>regexp</strong>" validator adds the "pattern" attribute to the rendered HTML</li><li>The "<strong>email</strong>" validator sets the <code>type</code> attribute to "email" in the rendered HTML</li><li>The "<strong>min</strong>" validator sets the <code>type</code> attribute to "number" and adds the "min" attribute in the rendered HTML</li><li>The "<strong>max</strong>" validator sets the <code>type</code> attribute to "number" and adds the "max" attribute in the rendered HTML</li><li>When bound to a <strong>number</strong> type, the TextField component sets the <code>type</code> attribute to "number" in the rendered HTML</li></ul><h2 id="FormsandValidation-ServerSideValidation">Server Side Validation</h2><p>Some validation can't, or shouldn't, be done on the client side. How do we k
now if the password is correct? Short of downloading all users and passwords to the client, we really need to do the validation on the server.</p><p>In fact, all client-side validation (via the validate parameter, or @Validate annotation) is performed again on the server.</p><p>It is also possible to perform extra validation there.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"><input type="email" required ...></pre>
+</div></div><p>which causes modern browsers to present a validation error message whenever text is entered that doesn't look like an email address, or if the field is left blank.</p><p>The browser's built-in validation is performed <em>before</em> Tapestry's own client-side validation. This is so that older browsers will still perform client-side validation as expected.</p><p>The following behaviors are included:</p><ul><li>The "<strong>required</strong>" validator adds the "required" attribute to the rendered HTML</li><li>The "<strong>regexp</strong>" validator adds the "pattern" attribute to the rendered HTML</li><li>The "<strong>email</strong>" validator sets the <code>type</code> attribute to "email" in the rendered HTML</li><li>The "<strong>min</strong>" validator sets the <code>type</code> attribute to "number" and adds the "min" attribute in the rendered HTML</li><li>The "<strong>max</strong>" validator sets the <code>type</code> attribute to "number" and adds the "max"
attribute in the rendered HTML</li><li>When bound to a <strong>number</strong> type, the TextField component sets the <code>type</code> attribute to "number" in the rendered HTML</li></ul><h2 id="FormsandValidation-ServerSideValidation">Server Side Validation</h2><p>Some validation can't, or shouldn't, be done on the client side. How do we know if the password is correct? Short of downloading all users and passwords to the client, we really need to do the validation on the server.</p><p>In fact, all client-side validation (via the validate parameter, or @Validate annotation) is performed again on the server.</p><p>It is also possible to perform extra validation there.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> /**
* Do the cross-field validation
*/