Highlighting and Placing Focus on Errors in EasyWeb4J

Highlighting fields with input errors is a common technique used in web applications to gain users attention to the errors. It is also helpful to place the focus on the first field with error so that the user can start correcting the input right away.

This can be implemented in an EasyWeb4J applciation by checking for the presence of error on the field of your model, represented by the input field. If an error is present, use a different CSS class for the input field which does the highlighting. To place the focus on the first field with error, you can use jQuery to select the first field with the CSS class representing errors. The completed application would look like this.

Download the complete source code for this application.

Create a new EasyWeb4J Hibernate Project as described in the tutorial. Since we do not need a database for this demo, delete src/main/resources/repositories.properties from the newly created project.

The Model

src/main/java/org/error/models/Person.java

The View

src/main/webapp/WEB-INF/views/Person/index.jsp

The view uses EL expression to determine whether an error is present on the field represented by each input. If present, it sets the CSS class of the input element to errorField.

The Javascript

src/main/webapp/js/script.js

The script places the focus on the first field with error. If none of the fields have an error in input, it places the focus on the first input field.