User friendly form validation with Wicket

User friendly form validation with Wicket

September 3, 2008 22:12 52 comments

By default Wicket shows error messages together in a single place in the HTML form. This has some drawbacks to usability, especially if you have long forms with lots of fields. Read further for a tutorial exploring possibilities to improve the location of the error on the page, thereby improving usability.

The default FeedbackPanel shows all errors in one place. When you enter a wrong value in an input field below the fold, the input field is a mile away from the error above the form. This makes it unclear which error message corresponds to which field.

form-usability-scanning.png

The image on the left shows that a lot of page scanning is needed even with moderate sized forms.

With more than a few fields, the user is confused as which error corresponds to which field. It is a big problem when your e-commerce site scares away many potential clients who can’t complete your web forms!

The default form

Before I describe how to create a more user friendly form, first the ‘default’ form. The following is an example of a standard Wicket form. This kind of form is the one you get without doing any ‘special’ magic things. Place your mouse cursor over the image to see the default error messages above the form.

Default Wicket form with FeedbackPanel at the top

This form will be the starting point for our improvements.

The improved form

This is what we are going to make:

Better and improved Wicket form with FeedbackLabels throughout

As you can see, the error messages are directly next to the component that caused the error. This reduces the scanning of the page to link the error message to the right form component.

Step 1: Introducing the FeedbackLabel

The FeedbackLabel is a custom component I’ve written for this tutorial. With this custom label, you can show important feedback messages related to a FormComponent.

This has the advantage that you can place your Feedback messages in any place you want.

Add this to the Java part of the form:

// This shows feedback when the name input is not correct.
FeedbackLabel nameFeedbackLabel = new FeedbackLabel("name.feedback", name);
form.add(nameFeedbackLabel);
 
FeedbackLabel colorFeedbackLabel = new FeedbackLabel("color.feedback", color, customText);
form.add(colorFeedbackLabel);

Add another SPAN tag for every feedback label. You can place this near the relevant form component within the form.

Step 2: Removing the FeedbackPanel completely? No, filtering!

At first, it looks like you can remove the FeedbackPanel completely. But, then you will not be able to use the info() method to display text inside the FeedbackPanel! Therefore we need a way to filter the FeedbackMessages so error messages are not shown. I have written a FeedbackMessageFilter to accomplish that. It filters out the unwanted error messages.

// filteredErrorLevels will not be shown in the FeedbackPanel
int[] filteredErrorLevels = new int[]{FeedbackMessage.ERROR};
feedback.setFilter(new ErrorLevelsFeedbackMessageFilter(filteredErrorLevels));

I have included the ErrorLevelsFeedbackMessageFilter in the project files, so you can reuse this in your existing projects. Remember if you use the error() method, you cannot use this filter! Instead, create your own filter that filters based on components.

Step 3: Adding some style, the ComponentVisualErrorBehavior™

I always love extremely long class names, like the BookmarkablePageRequestTargetUrlCodingStrategy or the SharedResourceRequestTargetUrlCodingStrategy. It makes my day to introduce a class name consisting of four words, the ComponentVisualErrorBehavior™.

This behavior changes the CSS styles for components that are invalid according to the Wicket form validation. You see in the screenshot that the textfield has a red line around it. This is the result of the ComponentVisualErrorBehavior. You can easily change the styles that are applied.

form-usability-tutorial-namefield.png

To add the ComponentVisualErrorBehavior to your component, just add one line in your Java code:

name.add(new ComponentVisualErrorBehavior("onblur", nameFeedbackLabel));

“onblur” stands for the event that triggers this Behavior. The nameFeedbackLabel will also be updated when this is triggered, so that it will show the relevant error (or nothing if the input is valid).

Download

Download the complete example project and start experimenting! (run with mvn jetty:run and connect to http://localhost:8080/demo)

Let me know how and where you use it in the comments!

52 Comments

  • It’s a shame you don’t have a donate button! I’d definitely donate to this fantastic blog!
    I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to new updates and will share this blog with my Facebook group.
    Talk soon!

  • Generally I don’t read post on blogs, but I would like to say that this write-up very compelled me to take a look at and do it!
    Your writing taste has been amazed me. Thanks, very nice article.

  • Software support should be accommodating and the cost should equal the value.
    Management can get response and feedback from their customers and can plan new products or can add
    or enhance certain features to launch better product or services in the market.

    The features of ERP that support BPR is the configurability, the integrative feature and the scope.

  • I don’t even understand how I finished up here, however I believed this
    submit used to be great. I do not realize who you
    are but certainly you are going to a well-known blogger in case you are
    not already. Cheers!

  • They are already noted for a while as there are recollection about these special
    yoga practices within the ancient papers. Modern scientific technologies
    like ART, ICSI,and IUI make treating male infertility easy.
    On one other hand when you are depending upon a Physicians expertise and
    experience in fertility we might be be assured in the
    following benefits.

Leave a reply