Simple User Profile Form

This example describes how to create a simple user profile form that has the following fields:

• Full Name (required) - a field whose value must be between 5 and 32 characters long.
• Age (required) - an integer field that must be between 18 and 99.
• Gender (required) - a one-letter field that accepts values 'M' or 'F'.
• Phone (optional) - if filled out, the value must be of the following format: 123-456-7890.

To achieve this goal we need

1. a form class that creates the input fields and validates itself
2. JSP page
3. the servlet that handles the data

The Form Class

A form can be created by extending the org.jreform.HtmlForm class. Inputs can be added to the form using the input(...) methods as shown below. These methods specify

• type of the input's data (e.g. string or integer)
• name of the input
• and optionally, criteria the input's data must satisfy (e.g. age must be between 18 and 99)

public class UserProfileForm extends HtmlForm {
    private static final String PHONE = "\\d{3}+-\\d{3}+-\\d{4}+";
    
    public UserProfileForm() {

        // A text input that must be between 5 and 32 characters long
        input(stringType(), "fullName", length(5, 32));
        
        // An integer field with a value between 18 and 99 inclusive
        input(intType(), "age", range(18, 99));
        
        // A character field that accepts 'M' or 'F' only
        input(charType(), "gender", accept('M', 'F'));
        
        // Optional phnoe number field with the following format: 123-456-7777
        // The length of the string must be exactly 12 characters
        input(stringType(), "phone", exactLength(12), regex(PHONE)).optional();
    }
    
    //
    // Convenience methods to get input values.
    //

    public Input getFullName() {
        return getInput("fullName");
    }
    
    public Input getAge() {
        return getInput("age");
    }
    
    public Input getGender() {
        return getInput("gender");
    }
    
    public Input getPhone() {
        return getInput("phone");
    }
}

The JSP Page

The JSP page is very straightforward. It simply contains a form with all the input fields listed above.

<jsp:useBean id="form" class="org.jreform.HtmlForm"/>

<form action="UserProfile" method="post">

Full name:
<div class="error">${form.fullName.messageOnError}</div>
<input type="text" name="${form.fullName.inputName}" value="${form.fullName}"><br><br>

Age:
<div class="error">${form.age.messageOnError}</div>
<input type="text" name="${form.age.inputName}" value="${form.age}"><br><br>

Gender (M / F):
<div class="error">${form.gender.messageOnError}</div>
<input type="text" name="${form.gender.inputName}" value="${form.gender}"><br><br>

Phone number (123-456-7890)
<div class="error">${form.phone.messageOnError}</div>
<input type="text" name="${form.phone.inputName}" value="${form.phone}"> (Optional)<br><br>

<input type="submit" name="submit" value="submit">
</form>

The Servlet

Finally, we create a servlet to handle the form data. The validation takes place by passing down the HttpServletRequest to the validate(...) method. When it's invoked, each input field is tested against the criteria specified in the form class.

Once validated, input values can be retrieved as whatever type specified in the form class.

If validation fails, the form is passed back to the JSP page, where specific error messages will be displayed to the user.

protected void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {

    UserProfileForm form = new UserProfileForm();

    if(req.getParameter("submit") != null) {

       // Validate form data
       if(form.validate(req)) {
           String fullName = form.getFullName().getValue();
           String phone = form.getPhone().getValue();
           int age = form.getAge().getValue();
           char gender = form.getGender().getValue();

           // process data..
       }
    }

    req.setAttribute("form", form);
    getServletContext().getRequestDispatcher("/UserProfile.jsp")
	.forward(req, res);
}

Download Example

The source code for this example is included in source archives available from the downloads page or from Sourceforge. Use the war target to generate a web archive using Ant.