MyFaces Client Side Validations
Posted by cagataycivici on February 7, 2007
It’s been almost a month since I’ve started working on a Client Side Conversion&Validation add-on for MyFaces and although %50 of the work is done, I’m glad that it has now reached a presentable point:) At past I’ve created a client side validation library which is in jsf-comp now and another one for my old firm and yet another experiment for myfaces, the whole story is here. Although all of these works are dead now, they were great experiences for my final work.
In order to create a JSF Client Side Validation framework, a good knowledge of Javascript is needed as well as JSF knowledge. I was missing the javascript part before so I spent quite some time practicing OOP Javascript and used it as a base later. OOP JS really helped me a lot to implement the thing in my mind.
Anyway long story short, the demos showing the Client Side Validation in MyFaces is deployed within Sandbox Examples that can be reached at IRIAN’s website. There are three examples under Client Validation section, one uses jsf standard h:form, another one uses sandbox s:fom and the last shows s:validationScript component.
The idea of having a validationScript tag is to enable this feature even myfaces form is not used. So if you’re using some other form like Trinidad tr:form or your own custom form, including validationscript component will enable client validation in the page. I suggest using h:form or s:form since it makes things easier by doing the dirty stuff(See the page source differences between the two examples).
There were a couple of client side validation solutions before like my old jsf-comp lib, shale or adf. Well, I dont really fancy Shale at all, because it uses alerts and a page designer needs to add several tags to validate at client side. In MyFaces you don’t need to do these, just turn on/off the following context param.
| <context-param> <param-name>org.apache.myfaces.ENABLE_CLIENT_SIDE_VALIDATION</param-name> <param-value>true</param-value> </context-param> |
Also it’s easy to plugin your own custom validator/converter, just make it implement ClientConverter/ClientValidator, provide your custom js resource and it’s all set. I’ll post an example later. I have many new ideas to implement like optional alerts, partial validation but the core infrastructure is completed and other than a few refactorings a big change is not likely to happen.
February 7, 2007 at 12:35 pm
I am not sure if a tag is needed. Perhaps for h:form it works. Have you tested ? The Trinidad tr:form also renders out some stuff in case Trinidad client side is enabled.
@Shale: The issue isn’t really the alert(). The issue is that there is a “I can do all crap with one tag”-tag. Also you can disable server side validation… cool security feature
The Trinidad also uses an alert()-window, but the framework is more than just a simple alter(). It is using client converter and client validator object. These guys use client side Converter/Validator exceptions and a client side implementation of FacesMEssage. See [1] for more.
I like the idea of having a support for client side validation (optional) being part of JSF 2 (or name it 6…). Using a popup or an alter isn’t the main point. That stuff should also work with style to render the affected fields with a error style or so, that a user still knows what’s wrong after closing the web1.0 alert() or web2.0 popup.
[1] http://incubator.apache.org/adffaces/devguide/clientValidation.html
February 7, 2007 at 3:56 pm
Yes Matzew, extending h:form renderer seems like a great idea as long as the commandLink, commandButtons are not broken. Added it to my todo list.
February 8, 2007 at 12:37 pm
Ok I’ve implemented the extended h:form renderer supporting client side validation, and added an example to sandbox examples webapp. Also updated the blog entry.
February 9, 2007 at 2:53 pm
Hi Cagatay, client side validation is a very useful part to build more user friendly apps.
Probably you need some logging features also in your JavaScripts? Probalby http://log4js.berlios.de could help you there.
Also the FireFox plugin http://www.getfirebug.com is very useful.
February 9, 2007 at 3:38 pm
Yes Stritti, I can’t live without firebug nowadays:)
February 12, 2007 at 1:48 pm
hi cost guard
it seems that jsf client side validation framework is gaining maturity day by day.. The problem is; they are being developed independently. So, there are so many good solutions, but none of them is standardized/generalized… may be it’s time to see it under the spec.
when come to your solution:
is it consist of client side validations only? i mean; did you left server side validation to JSF default validators?
for such a case; won’t it be a risc of two headed validation & results & messages…
Anyway: my dream validation framework can:
- bypass all the validations,
- bypass validations only for some fields (=validate only one group of fields)
- validate according to conditions.. (=only validate Y field when X condition happens)
hope these list gives some ideas about your validation infrastructure too..
i will be waching for your success man :).. it almost done
February 15, 2007 at 12:09 am
Well, spec focuses on stabilizing and improving the core framework structure(stuff like state saving, jsp compatibility). I guess the spec discussion for extra stuff like client validation will in the next jsf releases. What we’re trying to do is to create infrastructures that may join spec. For example afaik ADF state saving will be used in the next jsf release. And now your questions, please see the source code of the jsp page in myfaces examples, you see there’s no extra tag and it’s %100 compatible with the server side. I’ve overriden the JSF default validators so they do client side validation too now:) There are oop javascript objects they do conversion, validation, rendering messages that work at client side. The idea is to execute the validations phase of jsf lifecycle at client side. Since it’s %100 server side compatible, I cannot add stuff like validationg groups,conditional validations since it won’t be compatible with the server side execution. Thanks for the nice wishes of yours:)
August 30, 2007 at 2:13 pm
Hey All ! ! !
Want to spend your vacation to be remembered for long?
Tourism …
help you carry out your wishes !
July 28, 2008 at 11:59 am
Hi,
We have implemented jsf client side validations in our project. We came across one problem for some validators like cv:regularExpressionValidator showing script error “object is required”. It would be better to put a check like object != null in all the script functions. As we are showing text fields/static text for the same field based on user role, we are getting this error. So we have written script functions manually and used cv:customvalidator to invoke this function. Thanks