Setting HTML5 input pattern from JSF (Primefaces)

Question

I am using the Primefaces inputMask for formatting of phone numbers. However this component does not support the HTML5 pattern attribute, and therefore does not cause the iOS numeric keypad to appear.

I would like the resultant output to look somewhat like

    <input type="text" pattern="\d*"/>

I have tried using javascript to write the pattern attribute on page load, but couldn't get that to work (e.g.)

    $(document).ready(function() {
       $("#userPhDay").pattern="\d*";
    });

I was toying with the idea of using the above html5 input and then onchange the results into a h:inputHidden. Another option is to create my own tag library on top of primefaces that implement this.

I have found that BalusC (my favourite reference on all things JavaEE) has covered this for Omnifaces in his blog article http://balusc.blogspot.com.au/2012/06/adding-html5-attributes-to-standard-jsf.html. He went down the road of a custom renderer. I think Balus would answer this question by saying that I should use Omnifaces in addition to Primefaces.

What have others done to present the numeric keypad on mobile devices from JSF?

Cheers, Ed.

Edward Groenendaal Edward Groenendaal · Accepted Answer · 2013-07-09T02:54:30

As mentioned in the edit of the question the BalusC solution from his Blog worked. In summary you use OmniFaces in conjunction with Primefaces using the custom HTML5 renderer from OmniFaces to provide the HTML5 tags.

To do this is as simple as:

Adding in the OmniFaces depenedency to your pom for maven to pick up:

<dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version>1.5</version>
</dependency>

Add in the custom renderer to faces-config.xml:

<factory>
    <render-kit-factory>org.omnifaces.renderkit.Html5RenderKitFactory</render-kit-factory>
</factory>

And then you can start using HTML5 tags, e.g.

<h:inputText id="userPhDay" required="true" value="#{testBean.daytimePhone}" max="20" pattern="\d*" placeholder="99999999"/>

For backward compatibility you can always throw in javascript validation and filtering, which I'm going to do next.

Thanks BalusC!

Setting HTML5 input pattern from JSF (Primefaces)

1 Answers