JSF Standard Validation Example in Eclipse

December 7, 2014 by Mukesh Kumar at 3:47 pm

In this example we have a index page where user will ask to provide his card and payment details. On clicking Submit button, All field will be validated using JSF standard validator tag, if data validation is pass then user will be directed to result.jsp page else error message will be displayed on same page and form will not submitted.

Directory Structure Of Project

Directory Structure of project is shown below:

JSF Validation Example

Tools used :

JSF 1.2
Eclipse
JDK 1.6
Tomcat 6.0

Directory Structure Of Project

Directory Structure of project is shown below:

JSF Validation Example

Tools used :

JSF 1.2
Eclipse
JDK 1.6
Tomcat 6.0

Note:-If you have no idea about how to create JSF Application in eclipse then it is strongly recommended to complete Creating JavaServer Faces Application In Eclipse Tutorial before starting of this Project.

Step 1: Create Dynamic Web project

Open Eclipse and go to File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.

JSF Example

Provide the name of the project as JSFINBUILTVALIDATION . Once this is done, select the target runtime environment as Apache Tomcat v6.0. This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next -> Next -> Next.

JSF validation Example

In next screen select Disable Library Configuration from drop down and click Finish.

JSF validation Example

Step 2: Add jar files to build path of the project

Copy all the required jar files shown bellow to the lib folder of the project directory and add all jar files to the build path of the project.

JSF validation Example

Step 3: Create JSP files

Create two JSP files: index.jsp and result.jsp in WebContent folder.The login.jsp prompts the user to enter his/her credit card details.After successful validation user will be redirected to result.jsp page.In case of any data validation error message will be shown in the red color and it will ask to correct the data for form submission.

index.jsp

<%@ page contentType="text/html"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<f:view>
	<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title><h:outputText value="#{msg.title}" /></title>
</head>
<body>
	<h:form>
		<h1>
			<h:outputText value="#{msg.card_details}" />
		</h1>
		<h:panelGrid columns="3">
			<h:outputText value="#{msg.amount}" />
			<h:inputText id="amount" label="#{msg.amount}"
				value="#{payment.amount}" required="true">
				<f:convertNumber minFractionDigits="2" />
				<f:validateDoubleRange minimum="100" maximum="50000" />
			</h:inputText>
			<h:message for="amount" styleClass="errormsg" />

			<h:outputText value="#{msg.creditCard}" />
			<h:inputText id="card" label="#{msg.creditCard}"
				value="#{payment.card}" required="true">
				<f:validateLength minimum="16" />
				<f:attribute name="requiredMessage" value="#{msg.card_required}" />
			</h:inputText>
			<h:message for="card" styleClass="errormsg" />

			<h:outputText value="#{msg.expiry_date}" />
			<h:inputText id="date" label="#{msg.expiry_date}"
				value="#{payment.date}" required="true">
				<f:convertDateTime pattern="MM/yyyy" />
			</h:inputText>
			<h:message for="date" styleClass="errormsg" />

			<h:outputText value="#{msg.cvv_no}" />
			<h:inputText id="cvv" label="#{msg.cvv_no}" value="#{payment.cvvNo}"
				required="true">
				<f:validateLength minimum="3" />
				<f:attribute name="requiredMessage" value="#{msg.cvv_no_required}" />
			</h:inputText>
			<h:message for="cvv" styleClass="errormsg" />

		</h:panelGrid>
		<br>
		<h:commandButton value="Submit" action="submit" />
	</h:form>
</body>
	</html>
</f:view>

result.jsp

<%@ page contentType="text/html"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<f:view>
	<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title><h:outputText value="#{msg.title}" /></title>
</head>
<body>
	<h:form>
		<h1>
			<h:outputText value="#{msg.payment_Info}" />
		</h1>
		<h:panelGrid columns="2">
			<h:outputText value="#{msg.amount}" />
			<h:outputText value="#{payment.amount}">
				<f:convertNumber type="currency" />
			</h:outputText>

			<h:outputText value="#{msg.creditCard}" />
			<h:outputText value="#{payment.card}" />

			<h:outputText value="#{msg.cvv_no}" />
			<h:outputText value="#{payment.cvvNo}" />


			<h:outputText value="#{msg.expiry_date}" />
			<h:outputText value="#{payment.date}">
				<f:convertDateTime pattern="MM/yyyy" />
			</h:outputText>
		</h:panelGrid>
		<h:commandButton value="Back" action="back" />
	</h:form>
</body>
	</html>
</f:view>

Step 4 : Create properties file :

Create a package com.jwt.jsf.properties inside src/main/resources folder and create a properties file messages.properties inside this package and add following code into this.

messages.properties

title=Sample Application to Test JSF built in validation
card_details=Please provide your card details 
amount=Amount
creditCard=Credit Card
expiry_date=Expiration date (Month/Year)
payment_Info=Payment information
back=Back
card_required=A credit card number is required.
cvv_no=CVV No
cvv_no_required=CVV no is required.

Step 5 : Create CSS File :

Our requirement is in case of any validation error we need to display the error message in Red color. For this we need to create one css file. We created style.css in which one css class errormsg is created for this purpose.

In index.jsp we added below code to display the error message.

<h:message for="card" styleClass="errormsg" />

In the above code "errormsg" is css class name.

Create a folder inside WebContent and provide the name of the folder as css.In this folder create a css file and name it to style.css and add below line of code into this file.

.errormsg {
   color:red; 
}

We need to provide the path of css in our jsp pages. We need to add below line of code to import css in the jsp pages.

<link href="css/style.css" rel="stylesheet" type="text/css" />

Step 6 : Create JSF Managed Bean

A Managed Bean is a regular Java Bean class, registered with JSF. In other words, Managed Bean is a java bean, managed by the JSF framework.From JSF 2.0 and onwards, we can declare a managed bean, just by using the annotation @ManagedBean.

Create a java class PaymentBean inside "com.javawebtutor.jsf.bean" package and add bellow line of code into this class.

EmployeeBean.java

package com.javawebtutor.jsf.bean;

import java.util.Date;

public class PaymentBean {
	private double amount;
	private String card;
	private Date date = new Date();
	private String cvvNo;

	public double getAmount() {
		return amount;
	}

	public void setAmount(double amount) {
		this.amount = amount;
	}

	public String getCard() {
		return card;
	}

	public void setCard(String card) {
		this.card = card;
	}

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}

	public String getCvvNo() {
		return cvvNo;
	}

	public void setCvvNo(String cvvNo) {
		this.cvvNo = cvvNo;
	}

}

Step 7 : Update Configuration File(faces-config.xml)

Jsf looks for faces-config.xml in classpath and loads the configuration defined from here. Here we have defined managed bean (the backing bean), and navigation rule.Open faces-config.xml from WebContent -> WEB-INF folder and following code into this file.

faces-config.xml

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
        http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
	version="1.2">
	<navigation-rule>
		<from-view-id>/index.jsp</from-view-id>
		<navigation-case>
			<from-outcome>submit</from-outcome>
			<to-view-id>/result.jsp</to-view-id>
		</navigation-case>

	</navigation-rule>

	<navigation-rule>
		<navigation-case>
			<from-outcome>back</from-outcome>
			<to-view-id>/index.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	<managed-bean>
		<managed-bean-name>payment</managed-bean-name>
		<managed-bean-class>com.javawebtutor.jsf.bean.PaymentBean</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

	<application>
		<resource-bundle>
			<base-name>com.javawebtutor.jsf.properties.messages</base-name>
			<var>msg</var>
		</resource-bundle>
	</application>
</faces-config>

Step 8 : Update web.xml

In this step we will configure JSF via the web.xml file which is found under src/main/webapp/WEB-INF.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>faces/index.jsp</welcome-file>
	</welcome-file-list>
</web-app>