Wednesday, January 14, 2009

How to add Validation in JSF

Continue from previous blog ..........
Validation in JSF

Now see that how to put the validation in input values (using previous blog example).

1. Code to check for no input for a name to make sure that no empty name is submitted. To do that have to use required attribute of inputText tag.

<h:inputText value="#{StudentInfoBean.name}" required="true">

2. Code to check for reasonable length of input for a name. To do that have to use f:validateLength tag.
<f:validateLength minimum="2" maximum="10"/>

Now complete code for name input
<h:inputText value="#{StudentInfoBean.name}" required="true">
<f:validateLength minimum="2" maximum="10"/>
</h:inputText>

3. Still error message will not show on the screen, to show error message have to add this below code
<h:messages style="color:darkred"/>

Now complete studentInfoEntry.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="messages" var="message"/>
<f:view>
<html>
<head><title>JSF DEMO BY BINOD</title></head>

<body>

<p>
<h:messages style="color:darkred"/>
</p>

<h:form>
<h1><h:outputText value="#{message.input_header}"/></h1> <br>

<h:outputText value="#{message.prompt_student_name}"/>
<h:inputText value="#{StudentInfoBean.name}" required="true">
<f:validateLength minimum="2" maximum="10"/>
</h:inputText>
<br>

<h:outputText value="#{message.prompt_roll_number}"/>
<h:inputText value="#{StudentInfoBean.roll}" /> <br>

<h:commandButton action="result" value="#{message.button_text}" />
</h:form>
</body>
</html>
</f:view>

There are two type of validations are used in above code for student name
1. Student name can not be empty.
2. Student name can have of minimum 2 or maximum 2 characters.
If any criterial does fail then you will get error on the top of screen, because we have used <h:mesage ...... /> at top of screen.
One problem is there in above code that every time you will get the any type of error on top your screen, but error should show just infront of field. To do that, we will change the location of <h:messages style="color:darkred"/> and have to use of input id.
<h:inputText id="studentName" value="#{StudentInfoBean.name}" required="true"> <f:validateLength minimum="2" maximum="10"/> </h:inputText>
<font color="#FF0000"><h:message for="studentName"/></font>
I used the id for input component and used same id with message for tag.
We can also put all the component in tabular format for good look.
Again complete code of studentInfoEntry.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="messages" var="message"/>
<f:view><html>
<head><title>JSF DEMO BY BINOD</title></head>
<body>
<h:form>
<table >
<tr> <td align="center"><h2><h:outputText value="#{message.input_header}"/></h2></td> </tr><td></td><tr> </tr>
<tr> <td><h:outputText value="#{message.prompt_student_name}"/></td>
<td>

<h:inputText id="studentName" value="#{StudentInfoBean.name}" required="true"> <f:validateLength minimum="2" maximum="10"/>
</h:inputText>
<font ><h:message for="studentName"/></font>
</td> </tr><tr> <td>
<h:outputText value="#{message.prompt_roll_number}"/></td> <td> <h:inputText id="roll" value="#{StudentInfoBean.roll}" > <f:validateLongRange minimum="1" maximum="500"/> </h:inputText>
<font color="#FF0000"><h:message for="roll"/></font> </td> </tr><tr> <td><h:commandButton action="result" value="#{message.button_text}" /></td> </tr> </table> </h:form> </body></html></f:view>

Now there are three validations in the above code
1. Name can not be empty
2. Name can have of minimum 2 characters and maximum 10 characters.
3. Roll must be between 1 to 500 includings 1 and 500.
Now we will get error in front of respective input box. Means if error is related to name, it will come in front of name input box.

How to change the default error message
1. Make one packase say (com.suman.message.validation) in src folder and make one properties file (Mymessage.properties) in that package.

Mymessage.properties

javax.faces.component.UIInput.REQUIRED=Please enter a value for this field.

2. Add this code inside faces-config.xml
<application> <message-bundle>com.suman.message.validation.Mymessage</message-bundle> </application>

Restart the server, now you will get the difference in error message ealier it was Validation error : Value is required now it is Please enter a value for this field.


Custom Validation is coming soon ................ :)

No comments:

Post a Comment