...

Contents

The Form Component

The core of Tapestry's form support is the Form component. The Form component encloses (wraps around) all the other field components such as TextField, TextArea, Checkbox, etc.

...

<div class="form-group">
  <label for="userName" class="control-label">User Name</label>
  <input id="userName" class="form-control" name="userName" type="text">
</div>

Form Validation

The above example is a very basic form which allows the fields to be empty. However, with a little more effort we can add client-side validation to prevent the user from submitting the form with either field empty.

...

<t:textfield t:id="userName" validate="required" t:mixins="formgroup"/>
<t:passwordfield t:id="password" value="password" validate="required" t:mixins="formgroup"/>

Available Validators

Tapestry provides the following built-in validators:

...

Now, we'll rebuild the app, refresh the browser, and just hit enter:

Image Added

The form has updated, in place, to present the errors. You will not be able to submit the form until some value is provided for each field.

HTML5 Client-side Validation

When the "tapestry.enable-html5-support" symbol is set to true (it is false by default), and just hit enter:

Image Removed

...

the Tapestry's built-in validators will automatically add the appropriate HTML5 "type" attributes to the rendered HTML of Tapestry's form components, triggering the HTML5 validation behavior built into most modern browsers. For example, if you use the "email" validator, like this:

<t:textfield value="user.emailAddress" validate="email" />

then the output HTML will look like this:

<input type="email" ...>

The following HTML5 validation behaviors are enabled:

• The "required" validator adds the "required" attribute to the rendered HTML
• The "regexp" validator adds the "pattern" attribute to the rendered HTML
• The "email" validator sets the type attribute to "email"
• The "min" validator sets the type attribute to "number" and adds the "min" attribute
• The "max" validator sets the type attribute to "number" and adds the "max" attribute
• When bound to a number type, TextField (through NumericTranslator) sets the type attribute to "number"

Server Side Validation

Some validation can't, or shouldn't, be done on the client side. How do we know if the password is correct? Short of downloading all users and passwords to the client, we really need to do the validation on the server.

...

...

Customizing Validation Messages

...