Form separation in Tapestry

In this post I want to talk about separation of form data between sections, why it may be necessary to and how to implement it in tapestry5. Firstly lets think about why we can decide to separate our forms into sections.

1. We may need some organization of form data by logical sense.
2. We may need some separate validation for each group of form data.
3. We may need some validation highlighting for sections with errors.
4. We may have a very long form and want to extract some data into separate components.

All of this is possible. So lets look at this issues step by step.

Form data organization.

It can be achieved by wrapping form fields by fieldsets with a legend.

Validation.

Firstly we can create some component that will wrap our fields. Then it should trigger validate event to container when all form fields are already populated from incoming request. To achieve this we can store some special form action that will trigger validate event to container on form submission. And it should be deffered using FormSupport service.

Usage of this component can look like this:

Validation highlighting.

This is the most difficult and tricky one issue. To achieve this we need to create custom ValidationTracker service implementation that will save errors for both form and current section. To be available for all child components this tracker should be setted up before section started and be cleaned up after. And it should save its state if original tracker has errors. And it may look like this:

So only validation errors related to current section will be available inside. And to show errors for section we just need to place Errors component inside. We can also check whether this section has errors by invocation tracker.getHasErrors() from inside FormSection component and highlight its title. To simplify this I've created such component:

And the usage (with bootstrap classes):

Components.

Just extract sections into components. You can choose aggregation or inheritance.

And as usually:
Live demo
Source code