<?xml version="1.0"?>
<!--
  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.
-->

<page>
  <head>
    <style type="text/css">
      span.error {
          font-style:italic;
          font-weight:bold;
          color:red;
          background-color:#fffbe4;
      }
    </style>
  </head>

  <title>Form Validation And Pre-Population</title>

  <body>
    <h1>Reserve a car with Cocoon Cars!</h1>

    <p>This sample illustrates how to use simple form validation in conjunction
    with the SimpleFormTransformer to fill in user submitted data.</p>

    <h2>Car Reservation</h2>
    <p>Please fill in the form completely in order to reserve a car.</p>
    <form name="car" method="post">
      <table>
        <tbody>
          <tr>
            <td>Choose a car seating capacity</td>
            <td>
              <select size="1" name="persons">
                <option value="" selected="true" disabled="true">Please select</option>
                <option value="2">2</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="7">7</option>
                <option value="9">9</option>
              </select>
            </td>
            <td>
              <error name="persons" when-ge="error">*</error>
            </td>
          </tr>
          <tr>
            <td>Choose car type</td>
            <td>
              <select size="1" name="type">
                <option value="" selected="true" disabled="true">Please select</option>
                <option value="sedan">Sedan Car</option>
                <option value="station">Station Wagon</option>
                <option value="cabrio">Cabrio</option>
                <option value="racing">Sports Car</option>
                <option value="bus">Bus</option>
              </select>
            </td>
            <td><error name="type" when-ge="error">*</error></td>
          </tr>
          <tr>
            <td>Enter amount of the deposit</td>
            <td><input type="text" size="4" name="deposit"/></td>
            <td><error name="deposit" when-ge="error">*</error></td>
          </tr>
          <tr>
            <td>Enter confirmation email address</td>
            <td><input type="text" size="30" name="email"/></td>
            <td><error name="email" when-ge="error">*</error></td>
          </tr>
          <tr>
            <td>Enter billing address</td>
            <td><textarea name="address" cols="30" rows="5"/></td>
            <td><error name="address" when-ge="error">*</error></td>
          </tr>

          <!-- the following repeat tag inserts as many rows as -->
          <!-- drivers were submitted on the request. -->
          <repeat on="driver">
            <tr>
              <td>Allowed driver</td>
              <td><input name="driver" type="text" size="20"/></td>
              <td><error name="driver" when-ge="error">*</error></td>
            </tr>
          </repeat>
          <tr>
            <td colspan="2">
              Validation errors, if any:
              <ol>
                <li><error name="*" when-ge="error">An error occurred. <span style="background-color: #aaaaaa;">Please check your input and the messages below</span> for more <br /> information.</error></li>
                <li><error name="persons" when="too-small">The smallest car <br /> seats 2.</error></li>
                <li><error name="persons" when="too-large">The largest car <br /> seats 9.</error></li>
                <li><error name="deposit" when="too-small">The deposit needs to be <br /> at least EUR 50.</error></li>
                <li><error name="deposit" when="is-null">Please specify a <br /> deposit.</error></li>
                <li><error name="email" when="is-null">Please fill in an <br /> email address.</error></li>
                <li><error name="email" when="no-match">Your email seems incorrect. <br /> Please fill in a correct email address.</error></li>
                <li><error name="address" when="is-null">Please fill in a <br /> billing address.</error></li>
                <li><error name="address" when="too-small">Your address seems <br /> to be incorrect. Please fill in a correct billing address.</error></li>
                <li><error name="type" when="is-null">Please select the type of car <br /> you would like to drive.</error></li>
                <li><error name="type" when="no-match">Please select one of <br /> the existing type of car.</error></li>
                <li><error name="driver" when="error">Please enter at least <br /> one valid driver's name.</error></li>
              </ol>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="go" value="Go!"/></td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</page>
