tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/10-required/Required.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://java.sun.com/jsf/facelets">

  <p>If the validation of a form is activated and the actual value of this form is only stored temporarily,
    the validation is deactivated until the value is definitely stored into the model.</p>
  <p>For example, if only the value in 'Inner Form 1' is set, the validation of the other forms are turned off.</p>
  <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
           link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/form.html"/>

  <tc:section label="Example">
    <p>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.</p>

    <pre><code class="language-markup">&lt;tc:box label="Outer Form">
  &lt;tc:form>
    &lt;tc:box label="Inner Form 1">
      &lt;tc:form>
        &lt;tc:in label="Inner Value 1"/>
        &lt;tc:out label="Inner Value 1 in Model"/>
        &lt;tc:button label="Submit"/>
      &lt;/tc:form>
    &lt;/tc:box>
    &lt;tc:box label="Inner Form 2">
      ...
    &lt;/tc:box>
    &lt;tc:separator/>
    &lt;tc:in label="Outer Value" required="true"/>
    &lt;tc:out label="Outer Value in Model"/>
    &lt;tc:button label="Submit"/>
  &lt;/tc:form>
&lt;/tc:box></code></pre>

    <tc:box label="Outer Form">
      <tc:form id="outerForm">
        <tc:box label="Inner Form 1">
          <tc:form id="innerForm1">
            <tc:in id="in1" label="Inner Value 1" value="#{formRequiredController.innerValue1}"/>
            <tc:out id="out1" label="Value in Model" value="#{formRequiredController.innerValue1}"/>
            <tc:button id="submit1" label="Submit"/>
          </tc:form>
        </tc:box>
        <tc:box label="Inner Form 2">
          <tc:form id="innerForm2">
            <tc:in id="in2" label="Inner Value 2" required="true"
                   value="#{formRequiredController.innerValue2}"/>
            <tc:out id="out2" label="Value in Model" value="#{formRequiredController.innerValue2}"/>
            <tc:button id="submit2" label="Submit"/>
          </tc:form>
        </tc:box>
        <tc:separator/>
        <tc:in id="in" label="Outer Value" required="true" value="#{formRequiredController.outerValue}"/>
        <tc:out id="out" label="Value in Model" value="#{formRequiredController.outerValue}"/>
        <tc:button id="submit" label="Submit"/>
      </tc:form>
    </tc:box>
  </tc:section>
</ui:composition>