JSF Client Side Validators
November 8, 2005 35 Comments
JSF has no built-in support for “client side validations”, the goal of this component library is to bring this functionality to JSF. JSF Client Side Validation is implemented using a series of validator components.
There are several types of validators currently supported which are;
- Required Field Validator
- Range Validator
- Compare Validator
- Regular Expression Validator
- Length Validator
- Integer Only Validator
- Custom Validator
- Validation Summary
Common Attributes
- componentToValidate : Server id of the component to be validated.
- errorMessage : Text that is to be displayed when the input is invalid. (Can be bound to a bundle message.)
- highlight : Changes the background color of the component with an invalid input.
- display: Display mode of the error message.
- none : Validation message is not displayed in the message location but displayed only in the validation summary.
- static: Space for the message is allocated even the message is invisible.
- dynamic: Space for the message is created dynamically if the message is visible.
- style: Style class of the validation message
Validator Specific Attributes
- Compare Validator
- componentToCompare : Server id of the component whose value to be compared.
- operator : “eq” or “not”. Controls whether the values are equal or not.
- Required Field Validator
- No more attributes other than the common ones.
- Range Validator
- minValue : Lower valid bound.
- maxValue : Upper valid bound.
- Regular Expression Validator
- pattern: Regular expression pattern to be checked.
- Length Validator
- min : Min length.
- max: Max length
- exactly : Exact length
- Integer Only Validator
- Comes as a javascript function that disables letters onKeyPress.
- Custom Validator
- Enables to plug custom validator functions to the library.
- function: Function name
- params: Parameters
- Validation Summary
- Shows the validation summary either in place or as a popup message box.
UPDATED: Version 0.9.1. containing several bug fixes is released. Checkout the changelog.
Detailed
Documentation and Download
* There
is a very detailed documentation at
jsf-comp.
* Both source and the distribution can be reached
at jsf-comp downloads section.
*
I’ve provided an example web application which can also be reached at
downloads section.
* In addition here is another entry of mine focused on the features. I suggest you to take a look at the features list and how this library differs from Shale and ADF client validation.
* Current version is 0.9.1 which contains bug fixes of version 0.9.0.
UPDATE: 07.02.2007
The project is no longer under development, please see the successor of this library which has joined Apache MyFaces.
Cagatay Civici's Weblog 
I’m having problems with the jsfclientvalidatorsmanual.jar file. All other files are fine.
good work!
Where can I download the code in the mean time? I see no link here nor in MyFaces and I’d really like to take a look at these validators. BTW Força Barça!
Hi, let me see what I can do to distribute the component until myfaces team releases it. Maybe I can release it under myfaces subproject jsf-comp in sourceforge since I am a committer there.I will update the entry in two or three days and FORCA BARCA!!!
Hi, The article is very interesting, I’d like to take a look, maybe i can use it in my project right now. So where can i download the code?, I didn’t find a link on Myfaces project.
It is still under the donation process, the current status is here http://issues.apache.org/jira/browse/MYFACES-1060.Stay tuned.
Hi,
This is interesting.
1. Where from can I download the code?
2. What is the staus on integrating this with MyFaces?
3. Is it extensible – can we write custom client-side validator classes with our own JavaScript in a separate .JS file or so?
4. How do you compare it with the ADF client-side validation mechanism?
Thanks
Hi,
1.I hope sooner from myfaces sandbox
2.It’s in “patch available” state, dont know when the team will commit it.Actually wondering that myself too.
3.There is a regular expression validator to allow custom validation in some sense.It is not extendable in the way you mentioned.
4.Never tried adf:)
good thing
pl give the code for this client side validations
Plans have changed and this library will be released by me at jsf-comp.
Done, it is released.
Hi, dude:
I downloaded clientvalidators library and I tried to use it in my project, and sorry to tell you, it is a bit of pain the butt. You know what they say, the devil is in the details. Here are my comments:
1. I haven’t been able to figure out how the clientvalidators.js is loaded, so I extracted it from the jar and put it in a directory where I can reference it with a script tag. Please note that cv:scriptGenerator generates:
and some other stuff. Some people don’t use the faces prefix. You might want to add an attribute to customize this.
2. The staticDivClass, dynamicDivClass etc. are hard-coded. Some people might want a different color than red. Other people are color blind and it would be better if the text blinks, for instance. Again, you should add attributes to customize these puppies.
3. I have a page with a requiredValidator I attached to an inputText component. When the page is loaded up the field is empty and I want to display a * to indicate the user it is a required field. How do I do this? I expected this to happen magically since I linked the required validator to the component.
That’s it for now. I hope my comments didn’t upset you, please see it as constructive critique.
Thanks,
Biker
Hi Biker, interesting comments:)
1) Resources are loaded from the jar file, you do not need to extract them as I mentioned in my doc. You are right about the prefix, faces mapping must be defined. Forgot to add that in the doc.Next release will fix the dependency.
2) You can change the look of the messages using the style attribute.If you want it blue and arial-bold just use the style attribute.
3) You are expecting too much on the * thing. It is not a general requirement.:)
Regards,
hai
I was facinated by the client side validation and while I was successfull in getting all the features mentioned in the documentation at jsf-comp I am getting a blank pop-up without any message whenever all the criteria are met and page is about to submit the valid data to the server. can anyone please suggest me why am I geeting the extra popup
thanks
anup
Hi Anup, this seems like a bug. I’ll check it out and after fixing it, release a new bug fix version this week. Thanks for reporting.
I see the following warning on my Firefox javascript console when I test the sample webapp.
Warning: Non-standard document.all property was used. Use W3C standard document.getElementById() instead.
Source File: http://localhost:8080/clientvalidators-webapp-0.9.0/faces/faces/validatorResource?name=clientvalidators&type=js
Line: 240
This turns into an error in my webapp.
Hi, Neil. Thanks for reporting it. Next week I’ll release a bug fix version 0.9.1. Stay tuned.
I’ve just relased the Version 0.9.1. It’s a bug fix release. Several bugs have been fixed like empty popup. See the changelog here;
http://sourceforge.net/project/shownotes.php?release_id=421432&group_id=137466
Hi;
I’m trying to use the client validators with Java Studio Creator 2 and JSF.
I was able to integrate the jar file in the prject and add the validator code to the JSF page, but I ran into a couple of stumbling blocks trying to make things work. I like what I have seen, but these disconnects make it unusable for me. I supect that I am not doing something correctly.
1) Validation on page load.
When the page initially loads, I get the validation error messages in the upper left corner of the screen. It appears that the page is going
through the validation process when it is loading. Why does this happen?
2) Directing validation response to JSF ‘ui:message’ components.
I have added ‘ui:message’ components that are used with “standard” JSF components.
I set the “required” flag ‘true’ for the component, and I get a response from the JSF validation routines on submit.
How do I get the ‘clientValidator’ methods to write into these components?
I think the problem may lie with the ‘display’ parameter. I have them set to ‘static’ to indicate that fields are defined, but apparently,
the JSF definition does not make it to the ‘clientValidaror’ methods.
3) I’m not sure how to set up the ‘highlight’ color. From the comments, I suspect it has to do with the “style” attribute, but an example would be nice.
4) I posted this elsewhere, but will include it here:
Trying to use validator in a tab inside page fragment.
Trying to use popup for validation messages.
I think the problem I am having is identifying the “form” property properly.
Here is the heirarchy:
Form
ui:form binding=”#{EnrollStaffMain.form1}” id=”form1″
Page Fragment inside Div
Sub View inside page fragment
TabSet
ui:tabSet binding=”#{StaffTabPanel.tabSet1}” id=”tabSet1″
Tab
ui:tab action=”#{StaffTabPanel.tab1_action}”
binding=”#{StaffTabPanel.tab1}” id=”tab1″
For something like this, what would the form=”…” parameter look like
for the popup??
—–
Any help is appreciated.
Thanks,
Dave
Hi,
I am trying to make the client validator work with Facelets with no gain. I have followed the steps as mentioned in the http://jsf-comp.sourceforge.net/components/clientvalidators/index.html
The only difference I have is that I have defined the tag library as namespace as in
xmlns:cv=”http://sourceforge.net/projects/jsf-comp/clientvalidators”
My application works fine except that the resulting html doesnt show any source for the generated javascript and also no errors. Any clues? I would really like to use this package rather than rewriting or using a javascript based client side validation…
Thanks!
Have you checked this one;
http://www.jroller.com/page/cagataycivici?entry=jsf_client_side_validators_v0
Problem is you need to tell facelets about the tags, otherwise it will just ignore them. Usually the tld file inside the jar will be used but with facelets you need to set up mapping between the components specified in the face-config (also inside jar) and the names of the tags, this is because facelets doesnt use the usual component tag classes. Anyway start by setting up as per standard instructions, then do the following, it worked for me.
Put this in your web.xml:
And save this as /WEB-INF/clientsidevalidators.taglib.xml
Hi,I like the idea very much but I have a question:
if the client side script cannot be executed, (ie.: javascript not enabled on the browser) is the validation replicated on the server?
Hi Alberto, not for now but that’s one of the big things I’m gonna definitely fix.
Hi there!
Great job. just what I need. I’m thinking of using this but haven’t dug into the details yet. Just some light viewing.. If you could answer one question maybe it will save me some time. It looks like it has everything I need except…….
I have a list coming back that will display in a datatable.. only 1 form field per row is needed. the form object in row 1 may need to be validated but row 2 may not and so on.. it depends on an a property on the the object in the list and i won’t know until run time.
My only validation that may be needed is to ensure some value is entered (when required per the property on the object)
Is something like this possible with this library?..
Thanks!
Hi,
Can i use more than one Client validator for a component. Say a input box takes only numbers(so i would like disable the keypress events of alphabets) and the length must be 7 digit ???
Thanks
Hi,
I need to enter decimal values in a list (dataTable). I’ve noticed that I am able to add the validator only on the container of the fields (i.e. column). As expected, the javascript is generated on the column rather than on each index in the column.
Example: The name of the fields are distance_form:_id5:0:beanForm_distanceMeter
distance_form:_id5:1:beanForm_distanceMeter
The validator is trying to validate the value of a single field: distance_form:_id5:beanForm_distanceMeter
So the index is not mentioned and the fields are not validated. Is there any fix for this except for generating additional javascript that would iterate through the dataTable content?
Thanks
Hi
My application is using facelets as the viewhandler for jsf. It seems that the requiredFieldValidator component have a problem concerning the html output it generates (have not checked other components). See below snippet of generated output for an input field:
this is a subset of the facelet generated output:
this is what causes problems regarding the popup dialog and the collection of error messages. The script that captures errors takes the content of the div container and this includes the font element definition. when the popup appears the font tag is also shown. doesn’t look very nice. What confuses me is that when i use the default jsf viewhandler (JSP) this extra element is not included in the DIV container and therefore causes the expected popup result. (se below for div JSP output)
this is also the correct result. But i wonder what is the difference isn’t it the same render producing the response for the component regardless of it is JSP or Facelets as the viewHandler?
If there is an error could you please correct this issue as i am otherwise very pleased with this library and i would like to use it.
regards
kim
Hi
I forgot to say:
Barca Rules
Sorry ! I have to make a correction. I have found that when i enable AJAX and the associated filter in my configuration for my webapp it generates the above errors…
any clue ???
Hi,
I am new to JSF and happen to use the client side validator. It is excellent stuff. But I am getting a strange problem when using the validator. ( i am using cv:lengthValidator for checking the length). When the page is submitted, user (since i am the only user now user is me)gets a feel that the page first moves down to accomodate the summary (this is included at the top of the page) and suddenly the page moves up(incase there is no error). If there is error the page displays perfectly.(no problem with my eye in this case). Can you please suggest how to remove this page moving down and up problem.
Hi,
I am using the jsf client validator components for client side validation in my jsp’s. I have some queries on how the client validator components could be used to validate jsf input components inside a datatable.
I have a datatable in which each column is a inputText component, Now I can’t use the client validator components to validate the entered value because to use the cv components I need to specify the id of the component I need to validate. In the case of input components contained inside a datatable since the id is generated at runtime it is different for each row.
To illustrate my problem, consider the below snippet :
….
I cant use cv as illustrated above since the id of the textbox generted for the each row will be ..:0:wanted, ..:1:wanted, ..:2:wanted etc.
Any pointers on how I could use cv for components inside a datatable would be highly appreciated.
Regards,
Siju
Hello
Very interesting information! Thanks!
G’night
In supporting. You always like it. But there are other ways and methods.
Thank you, very match !!!
Pay attention, this site http://allprocard.com
Very interesting information.