| <?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>Here, only default data that is provided separate from the form |
| elements is filled in. No validation occurrs. The transformer has |
| been instructed to let error elements pass, therefore all errors |
| are shown.</p> |
| |
| <h2>Car Reservation</h2> |
| <p>Please fill in the form completely in order to reserve a car.</p> |
| <form name="car" method="post"> |
| <!-- the transformer can be configured to look for the instance --> |
| <!-- data outside the form element. --> |
| <form-instance> |
| <persons>4</persons> |
| <deposit>50</deposit> |
| <email>your email</email> |
| <address>Please |
| fill in your |
| address. |
| </address> |
| <type>sedan</type> |
| <driver>Peter</driver> |
| <driver>Mary</driver> |
| <driver/> |
| </form-instance> |
| |
| <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"> |
| All validation errors: |
| <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> |
