JavaServer Faces (JSF) Tutorial

JSF KickStart: Using Standard JSF Validation

We are going to build on the "A Simple JavaServer Faces Application" tutorial to show you how to use standard validation features in JSF. If you haven't done this tutorial already, you can just download the finished application for that tutorial and use it as the basis for proceeding with this tutorial.

The application built in the "A Simple JavaServer Faces Application" tutorial prompts the user to enter a name and then presents a greeting that uses that name. Now we want to make sure that valid input is entered before the submit button is even clicked. Let's see how it's done.

Steps

  1. Adding code to check for no input for a name
  2. Adding code to check for reasonable length of input for a name
  3. Adding code for printing error messages
  4. Compiling
  5. Deploying
  6. Running

Downloadable Version of Finished Project

But, first note that we have also provided you with the finished application in case you just want to just run it and skip most of the steps. If you want to do this, you can download and unzip jsfks-validation-done.zip. Then skip to the "compile" step and go from there.

Adding Code to Check for No Input for a Name

We want to make sure that no empty name is submitted. To do that, we will use the required attribute for the inputText tag in inputname.jsp. Setting this attribute to true will ensure that no empty value is submitted.

First, open this JSP file in the jsfks/WebContent/pages folder. In the coding for this page, we only need to add the required attribute as shown below in bold. That's all you need to do to make the field required. 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

<html>
 <head>
  <title>enter your name page</title>
 </head>
 <body>
   <f:view>
     <h1>
      <h:outputText value="#{msg.inputname_header}"/>
     </h1>
     <h:form id="helloForm">
      <h:outputText value="#{msg.prompt}"/>
      <h:inputText value="#{personBean.personName}" required="true"/>
      <h:commandButton action="greeting" value="#{msg.button_text}" />
     </h:form>
   </f:view>
 </body>
</html>

Adding Code to Check for Reasonable Length of Input for a Name

We also want to make sure that the name value is at least 3 characters long but not more than 10 long. To do that, we will use the f:validateLength tag in this same inputname.jsp file.

See the modified code in bold. Notice that we now close the inputText tag differently. Instead of being an "empty" element, it now has the f:validateLength element as a child element. 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

<html>
 <head>
  <title>enter your name page</title>
 </head>
 <body>
   <f:view>
     <h1>
      <h:outputText value="#{msg.inputname_header}"/>
     </h1>
     <h:form id="helloForm">
      <h:outputText value="#{msg.prompt}"/>
      <h:inputText value="#{personBean.personName}" required="true">
        <f:validateLength minimum="2" maximum="10"/>
      </h:inputText>
      <h:commandButton action="greeting" value="#{msg.button_text}" />
     </h:form>
   </f:view>
 </body>
</html>

That's all that we have to do.

Adding Code for Printing Error Messages

That last thing that we need to do is to add some kind of error message warning to the user. JSF provides a special tag to print messages.

As a last change to this file, we have added the h:messages tag and also set the color for the messages using the style attribute. This addition is shown in bold. 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

<html>
 <head>
  <title>enter your name page</title>
 </head>
 <body>
   <f:view>
     <h1>
      <h:outputText value="#{msg.inputname_header}"/>
     </h1>
     <p>
       <h:messages style="color:darkred"/>
     </p>
     <h:form id="helloForm">
      <h:outputText value="#{msg.prompt}"/>
      <h:inputText value="#{personBean.personName}" required="true">
        <f:validateLength minimum="3" maximum="10"/>
      </h:inputText>
      <h:commandButton action="greeting" value="#{msg.button_text}" />
     </h:form>
   </f:view>
 </body>
</html>

Compiling

An Ant build script is provided for you. To build the application run the build.xml script from the ant folder. 

ant build

Deploying

Before you can run this application within the servlet container, you need to deploy it. If you have already done the previous "A Simple JavaServer Faces Application" tutorial, you've already taken care of this. Otherwise, you will need to use null (link) deployment to deploy the application in-place by register a context in Tomcat's {TomcatHome}\conf\server.xml file.

To do this, insert this code: 

<Context debug="0"
docBase="Path_to_WebContent"
path="/jsfks" reloadable="true"/>
near the end of the server.xml file within the Host element just before the closing </Host> tag. Of course, Path_to_WebContent needs to be replaced with the exact path on your system to the WebContent folder inside the jsfks folder (for example, C:/examples/jsfks/WebContent).

Running

Next, start the Tomcat server (probably using the script startup.bat in Tomcat's bin directory). When Tomcat is done loading, launch a web browser and enter: http://localhost:8080/jsfks. (Port 8080 is the default port in Tomcat. Your setup, though, might possibly be different).


Exadel, Inc. Copyright 2005