PrimeFaces focus error field automatically

In PrimeFaces, if focus component <p:focus> is enabled : When page is loaded, it will focus on first visible input field; If validation failed, it will focus on first error field automatically. It works very nice, and a must use component in form handling. Just wonder why don’t make it enable by default?

In this tutorial, we will show you a simple signup form, uses <p:focus> to focus on the error field.

Tools used :

  1. PrimeFaces 3.3
  2. JSF 2.1.11
  3. Eclipse 4.2
  4. Maven 3
  5. Tomcat 7

1. SignUp Form

A simple form, username and password field.

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h:body>
	<f:facet name="last">
	  <h:outputStylesheet library="default" name="css/style.css" />
	</f:facet>

	<h1>PrimeFaces focus example</h1>

	<div style="width: 500px">
	<h:form>
	  <p:panel id="panel-signup">

          <!-- enable focus component -->
	  <p:focus context="panel-signup" />

	  <p:inputText id="username" required="true" label="username"
		size="40" requiredMessage="Please enter your username."
		value="#{userAction.username}">
	  </p:inputText>
	  <p:watermark for="username" value="Username *" />
	  <p:message for="username" />

	  <p:password id="password" required="true" label="password" size="40"
		requiredMessage="Please enter your password."
		match="confirmPassword" value="#{userAction.password}"
		maxlength="20">
	  </p:password>
		<p:watermark for="password" value="Password *" />
		<p:message for="password" />

	  <p:password id="confirmPassword" required="true" size="40"
		requiredMessage="Please confirm your password."
		label="confirmPassword" value="#{userAction.password}"
		maxlength="20">
	  </p:password>
	  <p:watermark for="confirmPassword" value="Type Password Again *" />
	  <p:message for="confirmPassword" />

	  <p:commandButton value="Register" style="margin:20px"
		action="#{userAction.register}" ajax="false" />

	  </p:panel>

	</h:form>
	</div>

</h:body>
</html>
UserBean.java – Do nothing, if everything is ok, redirect to thanks page.

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userAction")
@SessionScoped
public class UserBean {

	String username;
	String password;

	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 String register() {
		return "thanks?faces-redirect=true";
	}

}

2. Demo

http://localhost:8080/primefaces/index.jsf

Figure : Page is loaded, focus on first input, which is username field.

focus on first input field

Figure : Validation failed, focus on first field that caused the error.

focus on error field

Download Source Code

Download it – primefaces-focus-example.zip (12 KB)

References

  1. PrimeFaces focus component showcase
  2. PrimeFaces password JavaDoc

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
6 Comment threads
7 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
kumarQuânLoicYilin Gumkyong Recent comment authors
newest oldest most voted
Loic
Guest
Loic

HI, I have a quick question about this “error field” : is it possible to “command” them from the controller with a FacesMessage to show to the user that something go wrong in the field he felt ?? Bev=cause I look around to find a solution but didn’t find one yet ! Thanks a lot

Yilin Gu
Guest
Yilin Gu

The focus field is not exactly the first error field. It is based on the order in which messages store in the hashmap of the context, so it is ‘unpredictable’.

Quân
Guest
Quân

you are right,

kumar
Guest
kumar

Is there any way that we can control this?

akmwebtech
Guest
akmwebtech

nice .. Why you can’t use the php code and javascript at a combine type

Raed
Guest
Raed

The facet “last” which will attach the css stylesheet to the page should be in the header not in the body :)

<f:facet name="last">
	  <h:outputStylesheet library="default" name="css/style.css" />
</f:facet>
Daniel
Guest
Daniel

JSF 2.2.11 ??? typo…?

Kenneth Mark
Guest
Kenneth Mark

Very good tutorial !