<document>
    <body>
        <section name="Related Components">
            <ul>
                <li>
                    <a href="Form.html">Form</a>
                </li>
                <li>
                    <a href="PasswordField.html">PasswordField</a>
                </li>
                <li>
                    <a href="TextArea.html">TextArea</a>
                </li>
            </ul>
        </section>

        <section name="Examples">

            <p>
                Once again, we're basing the example on the order payment screen
                from the
                <a href="Radio.html">Radio</a>
                examples. This time we're focusing in on
                the text field used for entering the credit card number, and we're going to validate
                that number using a regular expression:
            </p>

            <p>
                <img src="textfield_ref.png"/>
            </p>

            <subsection name="Payment.tml (partial)">
                <source><![CDATA[
            <t:label for="cardNumber"/>:
            <t:textfield t:id="cardNumber"  validate="required,regexp" size="20"/>]]></source>

                <p>
                    The validate parameter is used to specify validations for the field. When it is omitted,
                    the @Validate annotation of the property is used (if present). In any case, this references
                    two of the built-in validations: "required" and "regexp".
                </p>

                <p>
                    This example presumes that the Payment page includes a property named "cardNumber".
                </p>

                <p>
                    The "required" validation requires no extra configuration. On the other hand, "regexp"
                    needs to know the regular expression to enforce ... and it should also have a
                    user presentable message.
                </p>

            </subsection>


            <subsection name="Payment.properties (partial)">
                <source><![CDATA[
cardnumber-regexp-message=Credit Card numbers consist of 16 digits
cardnumber-regexp=\\d{4}(\\-?\\d{4}){3}]]></source>

                <p>
                    Tapestry uses the page's message catalog as a source of extra validation information.
                    The key is the component id, the name of the validation. The value is given to the validator
                    object ... here it's the regular expression for a credit card number (four sets of four digits,
                    optionally seperated by dashes). The "-message" entry allows the normal error message
                    for the validator to be overridden.
                </p>
            </subsection>

        </section>

        <section name="Notes">
            <p>
                These same approaches apply consistently to all form control element components.
            </p>
        </section>
    </body>
</document>