Adding validation to Faces input components

You can set 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".
Before you add validation to an input component:
  1. Create a dynamic Web project.
  2. Create a JSF enabled JSP file.
To add validation to an input component:
  1. In the Properties view for the Input component, select one of the following formats from the list:
    • String - Specifies that the input should be in the form of a text string. For information on adding validation to a input string component, refer to the online help topic Adding validation to an input string component.
    • Number - Specifies that the input should be in the form of a number.
    • Date/Time - Specifies that the input should be in the form of a date and/or time.
    • Mask - Specifies that the input be filtered in a way that selectively includes or excludes certain values.
    Once you have selected a format, you can further configure the format from the options available in the Properties view.
  2. To validate the value entered in this field on the server, click the Validation tab in the Properties view:
    1. To require the user to enter a value, select Value is required.
    2. The validation has two options:
      • Use simple validation - Allows you to set a minimum and maximum number of character values for the input. When submitted to the server, the input is validated to ensure it is within this range. The Constraint drop down allows you select from a predefined set of regular expressions. The default is blank (no constraint). Use the Click to create/edit custom validation code to define a custom regular expression.
      • Use advanced validation - Allows you to define a validation using JSF expression syntax. When defining the constraint you can use standard Java™ or Javascript regular expression syntax.
    3. Select Display validation error messages in an error message control to automatically create a Display Error component that displays an error message if validation fails on the input component.
    Optionally, select Click to create/edit custom validation code to switch to the Quick Edit view and create custom validation code.
  3. To validate the value entered in this field on the client, click the Behaviour tab in the Properties view:
    1. Select Validate field value in the browser.
    2. On the onblur Actions and onfocus Actions tabs, for On success and On failure select a class for the Apply CSS classes field and select an action from the Run action list.
    Optionally, click Additional behaviors can be supplied in the onsuccess, onerror, onfocussuccess and onfocuserror events in the QuickEdit view to create custom behaviour code.
  4. Add a Submit button to the page using the Button - Commandcomponent on the Palette.
  5. Save the page.
You can test the validation by running the page on the server (right-click the page in Page Designer and select Run on Server.

Example: Using the Quick Edit view to create a 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.

Feedback