Software Development

Dialog Window with Validation and Error Messages using JSF and Primefaces

Background

[wp_ad_camp_5]

This article shows an sample Dialog window in JSF. It also showcases some basic field validation and the display of error messages.

Software Environment

  • Windows 7 Professional SP1
  • Eclipse – Kepler Release
  • Java 1.7 (1.7.0_67 – Windows x86)
  • JSF 2.2
    • Downloaded, and referenced as part of a Dynamic Web Project in Eclipse
  • Primefaces 4.0
    • Downloaded from www.primefaces.org
    • Place it in the project in WebContent\WEB-INF\lib and reference it

First, Show The Dialog Window

Normally, the dialog windows exist as separate reusable xhtml files that you include into a parent page. This is also a good practice. For example:

When these files contain forms, i.e., <h:form></h:form>, make sure the include statements are outside of the parent’s <h:form></h:form> tags.

A Sample Dialog Window

[wp_ad_camp_4]

Assume this file is dialogWindow1.xhtml. The contents are as follow.

This page is invoked in the parent page. A sample code snippet would be:

Notice the ID “wgVpBankDocument” is used to reference and displays our dialog window.

Field Validation

Field validation is enabled using the required attribute. For example:

In relation to this attribute, there is the requiredMessage attribute. The value of this is what gets displayed when an no value is supplied to the text field when the form is submitted.

Display the Error Messages

The error messages can be displayed individually or as a group. As a group, we use the messages tag. For example:

[wp_ad_camp_2]

Here, we do not specify for which field the message is for. All messages for each field are grouped and displayed as a single unit.

jsf-modal-window

To display individual message, we use the message (no ‘S’, singular noun) tag. On the image above, the first two messages are displayed individually. The first message uses the message tag from Primefaces namespace; while the second message uses the JSF/HTML namespace.

The third message contains the same messages above but are grouped as one unit.

Loading

Got comments or suggestions? We disabled the comments on this site to fight off spammers, but you can still contact us via our Facebook page!.


You Might Also Like