Adding validation to Faces input components

You can set advanced validation features for all Faces input components. For example, you can set validation for an Input Date/Time component by setting its minimum value to 2003/01/01 and its maximum values to "now."

Here are the basic steps of client and server validation for the input components.

1. Create a Faces JSP file.

2. Drag an Input component to the Faces JSP file.

3. On the Properties view for the Input component, choose String, Number, Date/Time, or Mask in the Format list.

4. On the Validation tab of the same Properties view, you can set validation attributes on the server when the input is submitted:
   • Check Value is required if the user must enter a value in this Input field.

   • Enter a Minimum and a Maximum value. For Input String and Input Mask components, enter the minimum and maximum number of characters allowed. For Input Date/Time components, enter the earliest (minimum) date/time allowed and the latest (maximum) date/time allowed. You can also enter "now" as a value. For Input Number components, enter the lowest (minimum) number allowed and the highest (maximum) number allowed.

   • Check Display validation error messages in an error message control to create a Display Error component that will be bound to this Input component and can display an error message if validation fails. The Display Error component is created on the page next to the Input component.

   • If you have an Input String component, you can select a Constraint from the menu. Choices include: No constraint, Alphabetic characters only, and Digit only. No constraint is the default and allows alphanumeric characters.

   You can supply additional validation in the Value Changed event in the Quick Edit view. Click the button next to Click to create/edit custom validation code to switch to the Quick Edit view.

   Note that other input components have similar Validation tabs.

5. On the Behavior tab, you can set input behavior on the browser. Note that the choices on the Behavior tab vary depending on the type of input component.
   • Set the style sheets to use after validation is successful (On success) or after validation fails (On failure). Click the browse buttons next to Apply CSS classes to search for style sheets. For example, you may want text to be black if validation succeeds and red if validation fails. In the Run action fields, you can choose an action if validation is successful and an action if validation fails. The choices are the same: Disable field, Enable field, and Select field.

   • You can set additional actions in the onsuccess and onerror events in the Quick Edit view by clicking the Quick Edit button.

6. Add a Submit button to the page.

7. Save the Faces JSP page and run it on the server.

Test the validation by submitting the page with no values present. The validation you created should run, and any error messages you created should display.

Example: Using the Quick Edit View to do custom validation

Here is an example of doing custom validation on values that the user enters into fields on a Web page. In this example, the user fills out a user registration form and clicks a Submit button. Before the registration form is submitted, you want to create validation that ensures that both the password field and the password confirmation field contain the same password. You also want to validate that the password field is at least six characters long. Follow these steps to create the custom validation:

1. Create a Faces JSP file that contains a registration form (with such fields as Name, Address, and so on) and a Submit button (commandExButton).

2. Drag two Input Hidden (inputSecret) components to the Faces JSP file. The first component is the Password field and the second is the Password Confirmation field.

3. Open the Properties view for the first Input Hidden component. On the Validation panel, check Value is required.

4. Set a Minimum length of six (6) characters.

5. Click the Submit button.

6. Switch to the Quick Edit view (Window > Show view > Quick Edit) for the Submit button.

7. Add the following code in the right pane of the Quick Edit view:

   String text1Val = (String)getSecret1().getValue();
   String text2Val = (String)getSecret2().getValue();
           
   System.out.println("text2Val = " + text1Val + " text2Val = " + text2Val);
           
   if(!text1Val.equals(text2Val)){
       System.out.println("NOT THE SAME");
       FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Passwords need to be the same", "Values should be the same");
       getMessages1().setErrorStyle("color:Red");
       getFacesContext().addMessage(null, message);
       return "errorCondition";
   }
   return "successCondition";

   FacesMessage has the following constructors:

   FacesMessage()
   FacesMessage(FacesMessage.Severity, String summary, String detail)
   FacesMessage(String summary)
   FacesMessage(String summary, String detail)

8. Save the Faces JSP file and run it on the server.

 

Related concepts

JavaServer Faces

 

Related tasks

Creating a custom validator
Adding input components to a Faces JSP file
Creating Faces applications - overview
Creating a Faces JSP file

Related reference
Faces components reference
Attributes for Faces components