Sub-Form Component (1)

We will use an invented term, "sub-form", to mean a component that contains input components. It will be put in a Form.
In this example we have a sub-form called SelectPersons which the page uses to edit invitation.invitedPersons.
On submit, the page validates invitation.invitedPersons.

Create Invitation

Event Description

People to Invite

Dishy Spoon

Humpty Dumpty2

Jack Sprat

Jill Spill

Mary Contrary

We would like the sub-form to do some validation, but where?
There is no point putting validation in an event handler method like onValidateFromForm() because the
method will never be triggered. Yes, Form will trigger event VALIDATE, but it wil bubble up to its container,
which is this page, not down into its body, which is where this sub-form sits.
We solve this in the next two examples.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp;
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>Sub-Form Component (1)</h3>
We will use an invented term, "sub-form", to mean a component that contains input components. It will be put in a Form.<br/>
In this example we have a sub-form called SelectPersons which the page uses to edit <em>invitation.invitedPersons</em>.<br/>
On submit, the page validates <em>invitation.invitedPersons</em>.<br/>
<div class="eg">
<t:form t:id="form" validate="invitation" class="form-horizontal well">
<h4>Create Invitation</h4>
<div class="form-group">
<t:label for="eventDescription" class="col-sm-4" />
<div class="col-sm-4">
<t:textfield t:id="eventDescription" value="invitation.eventDescription"/>
</div>
</div>
<div class="form-group">
<label for="invitedPersons" class="col-sm-4 control-label">${message:invitedPersons-label}</label>
<div class="col-sm-4">
<t:examples.component.SelectPersons t:id="invitedPersons" persons="allPersons" chosen="invitation.invitedPersons" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<t:submit value="Save"/>
</div>
</div>
<t:errors globalOnly="true"/>
</t:form>
</div>
We would like the sub-form to do some <strong>validation</strong>, but where?
There is no point putting validation in an event handler method like <em>onValidateFromForm()</em> because the
method will never be triggered. Yes, Form will trigger event VALIDATE, but it wil bubble up to its container,
which is this page, not down into its body, which is where this sub-form sits.
We solve this in the next two examples.<br/><br/>
References:
<a href="http://tapestry.apache.org/forms-and-validation.html">Forms and Validation</a>,
<a href="http://getbootstrap.com/components/#wells">.well</a>.<br/><br/>
<t:pagelink page="Index">Home</t:pagelink><br/><br/>
The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.<br/>
<t:tabgroup>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/SubFormComponent1.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/SubFormComponent1.properties"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/SubFormComponent1.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/subform.css"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/SelectPersons.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/SelectPersons.java"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/models/examples/Invitation.java"/>
</t:tabgroup>
</body>
</html>