Form fields within a Wicket TabbedPanel

Here’s something which took me several days to figure out. If you have form fields within a TabbedPanel (or AjaxTabbedPanel), how do you ensure that they get validated and submitted correctly when the user switches tabs . The TabbedPanel unloads panels as the user switches tabs so only the currently selected tab gets submitted. One suggestion (from Julian Sinai) was to use AjaxFormValidatingBehavior as follows:

AjaxFormValidatingBehavior.addToAllFormComponents(form, “onblur”);

This ensures that form fields get submitted every time they lose the focus (which also happens when the user switches tabs). This however still leaves us with the problem that the tab switch has already occurred before you have a chance to react to validation errors.

The solution I eventually found was to prevent the user switching tabs until any form fields within the selected tab validate correctly.

I did this by overloading the newLink method of the TabbedPanel and returning an AjaxSubmitLink instead of the standard AjaxFallbackLink (wouldn’t it make sense to make AjaxSubmitLink the default if the Panel contains form fields?). Since the AjaxSubmitLink needs a form, I needed to additionally extend the AbstractTab used by the TabbedPanel to query its panel for a form.

Here’s the overload of the newLink method:

Here’s the subclass of the AbstractTab to provide access to the form:

Here’s how the tabs are added:

And here’s how it looks in practice – in the example below, the user is attempting to switch tabs before all required fields have been filled out in the current tab.

The user attempts to switch tabs before all required fields are filled

One thought on “Form fields within a Wicket TabbedPanel”

Leave a Reply

Your email address will not be published.