Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Next, all the fields inside the form are activated to pull values out of the incoming request, validate them and (if valid) store the changes.

_For Tapestry 4 Users: _ Tapestry 5 does not use the fragile "form rewind" approach from Tapestry 4. Instead, a hidden field generated during the render stores the information needed to process the form submission.

...

When you first activate the Login page, the fields and forms will render normally, awaiting input:

Image Added

Notice !../images/validation_initial.png!Initial form presentationNotice how the Label components are displaying the textual names for the fields. Given that we have not done any explicit configuration, what's happened is that the component's ids ("userName" and "password") have been converted to "User Name" and "Password".

If you just submit the form as is, the fields will violate the "required" constraint and the page will be redisplayed to present those errors to the user:

Image Added

There!../images/validation_errors.png!Errors and decorationsThere's a couple of subtle things going on here. First, Tapestry tracks all the errors for all the fields. The Errors component has displayed them at the top of the form. Further, the default validation decorator has added decorations to the labels and the fields, adding "t-error" to the CSS class for the fields and labels. Tapestry provides a default CSS stylesheet that combines with the "t-error" class to make things turn red.

Next, we'll fill in the user name but not provide enough characters for password.

Image Added

The !../images/validation_minlength.png!Minlength error messageThe user name field is OK, but there's an error on just the password field. The PasswordField component always displays a blank value by default, otherwise we'd see the partial password displayed inside.

If you type in enough characters and submit, we see how the logic inside the Login page can attach errors to fields:

Image Added

This !../images/validation_password.png!Application supplied errorsThis is nice and seamless; the same look and feel and behavior for both the built-in validators, and for errors generated based on application logic.

...