Sunday, June 2, 2013

JSF number validator with regular expression

Although we can use <f:validateLongRange /> and <f:validateDoubleRange /> to validate number in JSF, but  that are simple enough and unable to validate complex number format.

To be able to validate more complex number, regular expression is recommended.
The core idea is to create a facelets composite component from <f:validateRegex /> validator by providing default regular expression to validate desired number format.

some useful number regular expression in the table below
FormatRegular expression
number with comma^(\d|,)*\.?\d*$
positive number only^\d{1,7}$
Percentage ^(0*100{1,1}\.?((?<=\.)0*)?%?$)|(^0*\d{0,2}\.?((?<=\.)\d*)?%?)$
currency^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$
for more information about number regular expression, please refer here.

Now let's start building the number validator with the chosen regular expression.


Steps:
1. Create the validateNumber.xhtml in folder <WebContent>/views/validator
<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
    <f:validateRegex
        pattern="^\d{1,7}$" />

</ui:composition>

2. Configure the validateNumber.xhtml in a custom taglib.xml, eg kian.taglib.xml.
    If custom taglib descriptor not created yet, please refer here.
<facelet-taglib xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd" 
    version="2.0">  

    <namespace>http://kian/jsf/composite/cc</namespace> 
    <composite-library-name>kian</composite-library-name>   

    <tag>  
        <tag-name>validateNumber</tag-name>
        <source>../views/validator/validateNumber.xhtml</source>
    </tag>   

</facelet-taglib>

3. Use the new composite component configured in taglib.xml
a) declare the custom namespace
 <f:view
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:kian="http://kian/jsf/composite/cc">

b) use the new validateNumber tag in webpage.
<h:inputText value="#{testSessionBean.myNumber}" id="myNumber" 
    validatorMessage="invalid number format">
    <kian:validateNumber />
</h:inputText>

<f:validateLongRange /> and <f:validateDoubleRange /> can be used to validate simple number format, please refer here for example.

Other input validation example in JSF:
  - Credit Card
  - Email
  - Simple Number


Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...