JSF Framework

Custom Validator in JSF Framework


Create Maven Project

On the Eclipse, create a Maven project

Click Next button and select maven-archetype-webapp

Click Next button and enter Project Information:

  • GroupId: LearnJSFFrameworkWithRealApps
  • Artifact Id: LearnJSFFrameworkWithRealApps
  • Package: com.demo

Click Finish button to finish create Maven project. Add Libraries and Dynamic Web Module as below:

  1. Select project and right click, select Properties menu
  2. Select Project Facets on left side
  3. Select Dynamic Web Module
  4. Select JavaServer Faces




Configure web.xml

Open web.xml file in src\main\webapp\WEB-INF folder and add configurations for JSF Framework as below:

<?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">
	<display-name>LearnJSFFrameworkWithRealApps</display-name>
	<context-param>
		<param-name>javax.faces.PROJECT_STAGE</param-name>
		<param-value>Development</param-value>
	</context-param>
	<welcome-file-list>
		<welcome-file>faces/index.xhtml</welcome-file>
	</welcome-file-list>
	<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>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.faces</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
</web-app>

Configure pom.xml

Open pom.xml file and add configurations for JSF Framework as below:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.demo</groupId>
	<artifactId>LearnJSFFrameworkWithRealApps</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>LearnJSFFrameworkWithRealApps Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<dependencies>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.8</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.17</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
		</dependency>
		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>
	</dependencies>

	<build>
		<finalName>LearnJSFFrameworkWithRealApps</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Entity Class

Create new package, named com.entities. In this package, create a entity class: Account.java

Account.java

package com.entities;

public class Account {

	private String username;
	private String password;
	private int age;
	private String email;
	private String website;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getWebsite() {
		return website;
	}

	public void setWebsite(String website) {
		this.website = website;
	}

}




Create Managed Bean

Create new package named com.demo in src/main/java folder. In this package, create new java class named AccountManagedBean.java as below: 

package com.demo;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.entities.Account;

@SessionScoped
@ManagedBean(name = "accountManagedBean")
public class AccountManagedBean {

	private Account account;

	public Account getAccount() {
		return account;
	}

	public void setAccount(Account account) {
		this.account = account;
	}

	public AccountManagedBean() {
		this.account = new Account();
	}

	public String save() {
		return "success?faces-redirect=true";
	}

}

Create Custom Validor

Create new package named com.validation in src/main/java folder. In this package, create new java class named UsernameValidator.java as below: 

package com.validation;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "usernameValidator")
public class UsernameValidator implements Validator {

	@Override
	public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
		String username = value.toString();
		if (username.equalsIgnoreCase("abc")) {
			FacesMessage facesMessage = new FacesMessage();
			facesMessage.setDetail("Username already exists.");
			facesMessage.setSummary("Username is invalid");
			facesMessage.setSeverity(FacesMessage.SEVERITY_ERROR);
			throw new ValidatorException(facesMessage);
		}
	}
}

Create View

Create new xhtml files in src\main\webapp as below:

Index View

Create new xhtml file named index.xhtml as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Register Page</title>
</h:head>
<h:body>

	<h3>Register Page</h3>
	<h:form prependId="false">
		<table border="0">
			<tr>
				<td>Username</td>
				<td>
					<h:inputText  value="#{accountManagedBean.account.username}"
						required="true" requiredMessage="This field is required" id="username">
						<f:validateLength minimum="3" maximum="10"></f:validateLength>
						<f:validator validatorId="usernameValidator"></f:validator>
					</h:inputText>
				</td>
				<td>
					<h:message for="username"></h:message>
				</td>
			</tr>
			<tr>
				<td>Password</td>
				<td>
					<h:inputSecret value="#{accountManagedBean.account.password}"
						required="true" requiredMessage="This field is required" id="password">
						<f:validateRegex pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})"></f:validateRegex>
					</h:inputSecret>
				</td>
				<td>
					<h:message for="password"></h:message>
				</td>
			</tr>
			<tr>
				<td>Age</td>
				<td>
					<h:inputText value="#{accountManagedBean.account.age}"
						required="true" requiredMessage="This field is required" id="age">
						<f:validateLongRange minimum="18" maximum="120"></f:validateLongRange>
					</h:inputText>
				</td>
				<td>
					<h:message for="age"></h:message>
				</td>
			</tr>
			<tr>
				<td>Email</td>
				<td>
					<h:inputText value="#{accountManagedBean.account.email}"
						required="true" requiredMessage="This field is required" id="email">
						<f:validateRegex pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></f:validateRegex>
					</h:inputText>
				</td>
				<td>
					<h:message for="email"></h:message>
				</td>
			</tr>
			<tr>
				<td>Website</td>
				<td>
					<h:inputText value="#{accountManagedBean.account.website}" id="website">
						<f:validateRegex pattern="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?"></f:validateRegex>
					</h:inputText>
				</td>
				<td>
					<h:message for="website"></h:message>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					<h:commandButton value="Save" action="#{accountManagedBean.save()}"></h:commandButton>
				</td>
			</tr>
		</table>
	</h:form>

</h:body>
</html>

Result View

Create new xhtml file named result.xhtml as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Result Page</title>
</h:head>
<h:body>

	<h3>Result Page</h3>
	<table border="1">
		<tr>
			<td>Username</td>
			<td>#{accountManagedBean.account.username}</td>
		</tr>
		<tr>
			<td>Password</td>
			<td>#{accountManagedBean.account.password}</td>
		</tr>
		<tr>
			<td>Age</td>
			<td>#{accountManagedBean.account.age}</td>
		</tr>
		<tr>
			<td>Email</td>
			<td>#{accountManagedBean.account.email}</td>
		</tr>
		<tr>
			<td>Website</td>
			<td>#{accountManagedBean.account.website}</td>
		</tr>
	</table>

</h:body>
</html>

Structure of Project




Run Application

Select project, right click and select Run on Server menu

Access index.xhtml page with following url:

http://localhost:8080/LearnJSFFrameworkWithRealApps/faces/index.xhtml

Click Save button submit form to save method with some instances of invalid data as below:

Click Save button submit form to save method with valid data as below:


Related Posts

Pass Objects List from Managed Beans to View in JSF Framework

Pass Object from Managed Beans to View in JSF Framework

Pass Data from Managed Beans to View in JSF Framework