The structure of this example is similar to the
Form Required
example.
Every form in this example is surrounded by a content box.
The submit buttons in the inner forms only put the inner value into the model.
The submit button in the outer form put all values into the model.
The validation for the inner value 2 and for the outer value is activated, both fields are required.
There are also two more submit buttons in the outer form.
The 'Inner Forms' button submit both values in the inner forms.
The 'Outer Value' button only submit the outer value.
Please notice, that all buttons use the
<f:ajax execute="..." render="..."/> tag.
Also note, that the
<tc:message/> tag has to be rerendered
to show error messages.
<tc:box label="Outer Form">
<tc:form>
<tc:box label="Inner Form 1">
<tc:form>
<tc:in label="Inner Value 1"/>
<tc:out label="Inner Value 1 in Model"/>
<tc:button label="Submit">
<f:ajax execute="in" render="in out :page:messages"/>
</tc:button>
</tc:form>
</tc:box>
<tc:box label="Inner Form 2">
...
</tc:box>
<tc:separator/>
<tc:in label="Outer Value" required="true"/>
<tc:out label="Outer Value in Model"/>
<tc:button label="Submit">
<f:ajax execute="::form1:in ::form2:in in"
render="::form1:in ::form2:in in ::form1:out ::form2:out out :page:messages"/>
</tc:button>
...
</tc:form>
</tc:box>