My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

miercuri, 4 martie 2015

JSF Tip - Combine HTML5 client-side validation with JSF server-side validation

In this post, you can see two tips of using HTML5 client-side validation with JSF tags. Maybe, one of the most used JSF validators is the built-in required validator. Before applying other validators we need to have something to validate, so the required="true" is commonly used in <h:inputText> tags. Practically, each time the form is submitted, the required="true" is evaluated in the Process Validation phase. But, HTML5 also has a required attribute, which basically has the same role as the JSF built-in required validator, only that works on client-side, without submitting the form. So, if we use pass-through attributes, we can add the HTML5 required into equation and avoid form submission until the required inputs contains something. Of course, we keep the JSF required built-in validator also, for browsers that doesn't support HTML5 and for having server-side validation:

<!-- xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" -->
<h:form>
 Name: <h:inputText value="#{playerBean.name}" required="true" pt:required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>


Output (left side HTML5 required effect, right-side JSF required effect):


HTML5 also provides an attribute named, formnovalidate. This is useful to skip validation and implement a Cancel like button. For example, if your form is based on  client-side validation and it doesn't contain JSF validators, you can write a Cancel button, as below:

<h:form>
 Name: <h:inputText value="#{playerBean.name}" pt:pattern=".{2,}"/>          
 E-mail: <h:inputText value="#{playerBean.email}" pt:type="email" pt:required="true"/>          
 <h:commandButton value="Send" action="data"/>
 <h:commandButton value="Cancel" action="#{playerBean.cancel()}" pt:formnovalidate="formnovalidate"/>
</h:form>

Note The Cancel button will work (the cancel() method will be invoked without client-side validation) only if you don't have JSF validators. This approach will NOT skip JSF Process Validation phase.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors