Accepting input from a user is one of the most common scenarios for web application developers. User input is typically character data that represents different types of information, such as dates, numbers, and text. JSF includes a number of standard components that represent HTML form elements that can be used to collect this information from users.
The HtmlInputText component, for example, is a good choice for accepting short textual input from the user. For use cases that require more text, such as a memo field or comment box, the HtmlInputTextarea component is a better choice as it can accommodate multiline text entry more easily.
The following example demonstrates how to accept text input from the user:
<f:view>
<h:form>
<div>
<h:outputLabel for="name" value="Enter your name: " />
<h:inputText id="name" value="#{backingBean.name}" />
<h:commandButton value="Submit" />
</div>
<div>
<h:outputText value="Hello, #{backingBean.name}" rendered="#{backingBean.name ne null and backingBean.name ne ''}" />
</div>
</h:form>
</f:view>
Notice the value attribute of the<h:inputText> tag. The text field is bound to a backing bean String property using the JSF Expression Language (JSF EL). When the form is submitted, the property is set to the value of the text entered by the user.
This example also demonstrates conditional rendering of JSF components. Most JSF tags support the rendered attribute. This attribute allows us to control when a JSF component should be displayed on the page. In this case, the<h:outputText> tag is conditionally rendered when the backing bean's name property is not null and is not equal to an empty string.
In the next example we will use a text field to receive a date value from the user. First we register the standard JSF date time converter on the UI component by nesting the<f:convertDateTime> tag inside the<h:inputText> tag. This converter will attempt to convert the text entered by the user to a date by using the conversion pattern specified in the pattern attribute. Next we register a custom date validator to make sure that the converted date value represents a valid birth date. The error message rendered below the text field was produced by our validator class.
<f:view>
<h:form>
<div>
<h:outputLabel for="name" value="Enter your birthdate (M/d/yyyy): " />
<h:inputText id="name" value="#{backingBean.date}">
<f:convertDateTime type="date" pattern="M/d/yyyy" />
<f:validator validatorId="customDateValidator" />
</h:inputText>
<h:commandButton value="Submit" />
</div>
<h:message for="name" style="display:block" errorStyle="color:red" />
<div>
<h:outputText value="You were born on " rendered="#{backingBean.date ne null}" />
<h:outputText value="#{backingBean.date}">
<f:convertDateTime type="date" dateStyle="full" />
</h:outputText>
</div>
</h:form>
</f:view>
The following screenshots demonstrate a custom date validator class that determines if a date represents a valid birth date. The error message rendered below the text field was produced by our validator class.
When the validation is successful, our backing bean property is updated and the view is rendered again in the browser. This time, our conditionally rendered message is displayed to the user.
The next example shows how to accept numeric input from the user. JSF includes built-in converter classes that handle conversions between character data (strings) and Java data types, such as Integer, Boolean, Float, Long, and so on. In this example, we specify that the text field component can only accept a whole number between 20 and 50 by using the<f:validateLongRange> tag to register a standard validator on the component.
<h:inputText id="number" value="#{backingBean.number}">
<f:validateLongRange minimum="20" maximum="50" />
</h:inputText>
Note that the error message below the text field was produced by the built-in JSF NumberConverter class and is the default text for this particular error. We can override the default JSF conversion and validation error messages by declaring messages with the same keys in our resource bundle.
If we enter a non-numeric value, we will receive an appropriate error message:
If the number is not in the specified range, we will also get an error:
Note
JSF validation messages
The JSF framework includes predefined validation messages for different validation scenarios. These messages are defined in a message bundle (properties file) including the JSF implementation JAR file. Many of these messages are parameterized, meaning that as of JSF 1.2, a UI component's label attribute value can be inserted into these messages; the default JSF validation messages can be overridden by specifying the same message bundle keys in the application's message bundle.
Finally, the value is accepted by the converter and our view is updated, displaying another conditionally rendered HtmlOutputText component.
