mayduTechblog

March 20, 2009

Input Validation with GWT

Filed under: GWT, Java — amayen @ 12:10 am

The Google Web Toolkit is a great way to build webbased frontends for applications. There comes quite some functionality out of the box, such as a Swing-like development style and the fundamental functionality used to build Rich-Client Webbased-Frontends. It is very good in creating a fluid interaction feeling, without the end-user being constantly interrupted in his workflow by page loading and the like. Additionally there are many libraries out there to even enhance the possibilities of GWT, like SmartGWT, Gilead, etc.

Where it lacks, is the possibility to validate the data that a user inputs. Which I find quite surprising for a web development toolkit. So in order to fill the gap, there are already some projects existing including:

Unfortunately there are some issues with these frameworks that made them appeal to not be the right thing for what I had in mind.

The GWT-Validator’s biggest disadvantage is, that its functionality is tied to the client side, so the most important part in a security point of view is not addressed. Another big problem is that it is not supported nor further developed by the original authors.

The GWT Validation Framework does bring validation to the client and server side. One strong point about it, is that the validation code only needs to be written once and can then be automatically used on the server and the client side. Unfortunately it also has some issues of which the main drawbacks for me are:

  1. No help for setting up “nice” client notifications of validation errors
  2. No localization of validation messages yet
  3. Conflicts in a way with Hibernate-Validator

As I’m quite convinced of the usage of Hibernate in my projects and already use the Hibernate-Validator capabillities I do not want to drop them in favor of the GWT Validation Framework’s style of doing these kind of things.

Because of the forementioned shortcomings of the existing frameworks and my believes in Hibernate I began work on my own framework which I call the GWT Validation Library (see here for a little Showcase).

The main aspects I wanted to achieve were:

  • Make it easy for the developer to set up “nice” client side notifications
  • Validation errors on the server side should also be shown “nicely” on the client with little overhead
  • Integration with the Hibernate-Validator framework
  • I18n of the validation messages
  • Support of writing custom validators
  • Action concept for showing the validation errors
  • Support of writing custom actions

I think I have achieved these goals now and am quite happy with the result. So here goes the introduction of what you can do with the GWT Validation Library.

Easily add validation on the client side:

  1. ValidationMessages messages = new ValidationMessages(); //Contains the validation messages. Fully localizable!
  2.  
  3. ValidationProcessor validator = new ValidationProcessor(messages);
  4.  
  5. //We might have some TextBox that should only contain numeric values from 0 to 15
  6.  
  7. validator.addValidators("number",
  8.     new IntegerValidator(numberTextBox, 0, 15)
  9.         .addActionForFailure(new FocusAction()) //Adding an action in case of a validation failure
  10. );

The result is that we have now added client side validation to a TextBox element that only accepts numbers from 0 to 15 inclusively, if the widget fails validation the focus will be put on it, because we added an FocusAction to it! We could now go on and add additional validator constraints for different widgets or even more than one validator or action for one widget.

For example we could also do this:

  1. validator.addValidators("number",
  2.     new IntegerValidator(numberTextBox, 0, 15)
  3.         .addActionForFailure(new FocusAction()) //Adding a focus action
  4.         .addActionForFailure(new StyleAction("validationFailedBorder")) //… and a style action
  5. );

Now we added two actions! The FocusAction that focuses the widget and a style action, that adds a specific style to the widget when validation fails (for example the widgets border could be set to red color).

We can setup validation like this for all the components we would like to validate. All we have to do when the user is finished entering data and wants to invoke an action is:

  1. if(!validator.validate())
  2.     return; //Validation failed. Don’t do anything
  3. else {
  4.     //Validation was correct. Invoke the action you need to invoke
  5. }

In the case of a failing validation all the actions are invoked (or only the ones for the first error, depending on configuration). So the user is presented with “fancy” validation error messages that guide him through correct data entry.

An example would be:

Dialog in its initial state

Dialog in its initial state

And after triggering the validation process:

Dialog with failed validations shown

Dialog with failed validations shown

In order to make the development of a consistent validation user experience even easier it is possible to create your own custom validators and your own custom actions, so you can for example create custom validators that are prebuilt with the needed Actions so you do not have to repeat yourself in adding the same Actions over and over again.

So, I think thats it for the moment. But there is quite some stuff more that the GWT Validation Library is capable of (Serverside validation, I18n, etc.) so stay tuned for the next post or just check for yourself.

In the next part of this series I will examine the possibilities on how to connect server side validation with the client side and additionally adding Hibernate-Validator to the game.

You can download the GWT Validation Library here.

You can visit the showcase site here.

32 Comments »

Hi,
would it be possible to merge the effort begun in GWT incubator? Because there are already some steps done and maybe it wouldn’t be so hard to take good side from both of them…

Comment by eldzi — March 26, 2009 @ 1:32 pm


This is great! I’d love to see a validator for dates which is pretty hard. I’ve used code from calparse (BSD) in projects.
You also have to be careful because what the db means by “Date” is not the same as what Java means. For example,
in Postgres ‘date’ is YYYYMMDD, ‘timestamptz’ is roughly microsecond plus timezone while in Java ‘Date’ takes long milliseconds_since_epoch. I’m not familiar enough with Hibernate-Validator to know how it handles these issues.

Comment by Joshua Daniel Franklin — March 26, 2009 @ 7:07 pm


Nice work, I haven’t checked your code so far; but I think a really important Action would be to do add
a tooltip to the gui elements which failed the validation with some user defined text which explains what
went wrong.

In your showcase you used the labels to explain how the data should be entered. In the real world you
would have there the label. How should the user now know how to enter valid data. A tooltip or similary
would help here greatly.

Cioa

Comment by Dieter — March 27, 2009 @ 9:30 am


Hi thanks for the suggestions!

Let me give you a little bit of an update. The library is still in its early development so there will be
more features coming (also more Actions). An documentation is begun which you can find at: http://gwt-vl.sourceforge.net

@Dieter: Normally the user should be able to tell from the label what kind of input is exptected: Like the label would be Age then the user should have an idea that he should not put in negative numbers in there. But if he does he will be told about it through the validator. Anyway I really like the tooltip suggestion and will try to implement this as one of the next features. This way you can offer even more help to your users if you choose to.

@eldzi: I only found out about the gwt-incubator validation now. After taking a short look at the javadoc, it seems that both projects take a similar approach in some areas. But I have to investigate further first.

@Joshua: About the date problem I think that this is more of a general problem which needs to be taken care of by the developer with some other tools, as the GWT Validation Library only focuses on validating the input. So for an date it may validate that the format is in the form of “Month/Date/Year” or so. But you need to take care of correct conversion into the database format yourself.

I will be posting the second part of the article, which will discuss server side validation and the connection of server to client side, at the end of the week so check back.

Comment by Anatol Mayen — March 30, 2009 @ 4:43 pm


[...] Input Validation with GWT - Part2 (ServerSide) Filed under: GWT, Java — amayen @ 4:44 pm dzone_url = “http://techblog.maydu.eu/?p=72″;Welcome to part 2 of the discussion of the GWT Validation Library. [...]

Pingback by Input Validation with GWT - Part2 (ServerSide) « Techblog — April 7, 2009 @ 6:42 pm


Thanks for the review!

Comment by mark — April 15, 2009 @ 5:44 am


Hello, I have question regarding the showcase. In the first tab of the showcase a popup panels is shown when user selects any of the fields. I looked at the code and it seems that PopupDescription class is used for this functionality, but such class is not available in the showcase’s source. I think that there is a little mismatch between demo and the code. But let get back to my question, how can I use parameters in the messages that are shown in the PopupDescription. Currently I have the following code in my custom ValidationMessages:
if (”invalidSchoolName”.equals(msgKey)) {
return messages.invalidSchoolName();
}
return “Generic errror.”;
and I don’t know how to give “Name” param.
Can you give me some light about that ?

Thanks in advance

Comment by mgenov — April 29, 2009 @ 3:59 pm


Great site, Good info

Comment by Tamiflu — May 1, 2009 @ 9:49 pm


Hello mgenov!

In the upcoming release it will easily be possible to use parameterized custom validation messages. It will be up on sourceforge during the next days so look out for it!

I will also update the demo code, thanks for noting!

Comment by admin — May 2, 2009 @ 8:49 pm


Hello there,

I’ve had a quick play with the code and it looks great! I’ve had a play with the gwt-incubator classes and the issue with them is that there are a lot of static classes everywhere which makes it harder to test the class using JUnit, so well done for staying away from static classes!

One comment I would suggest which would make testers life easier with your code is if you could create an interface for the ValidationProcessor which would therefore allow other classes to communicate via the interface. I’m using an Model-View-Presenter approach for my project and the presenter makes the call to the ValidationProcessor to check validation - if the ValidationProcessor was an interface then I could more easily JMock the presenter without causing any issues.

Cheers and thanks for sharing your code.

Comment by moe — May 11, 2009 @ 9:14 pm


[...] about GWT-VL so if you haven’t read them by now I would advise you on reading them first here (Part 1) and here (Part [...]

Pingback by GWT-VL: Validation with RestletGWT « Techblog — May 14, 2009 @ 10:59 pm


Thanks for such useful library.
1) Is there any javadoc API available? One can get better knowledge about classes, methods and their relationship by using javadoc API at one place.
2) Is there any sample application, which shows complete end-to-end development using GWT validator library?

Thanks.

Comment by GNilesh — June 2, 2009 @ 3:18 pm


Hi!

1) A Javadoc is available on sourceforge on the downloads tab.

2) Right now there is no such application, but I’m working on a sample application, that does a little bit more than just the usual trivial examples, so stay tuned.

Anatol

Comment by admin — June 11, 2009 @ 11:41 am


Great beginning to a nice framework!

A quick question for you:

It appears that all the validations assume that a field is required. What do I do if a field isn’t required but if a value is entered I want the value validated?

Seems like you’d either want to tell the validator that the value is “nullable” or the validators just ignore the value if it is null (or empty string or whatever) and you have to add a NotEmptyValidator if the field is required.

Thanks and keep up the good work.

Comment by Mike — June 23, 2009 @ 10:44 pm


Hi Mike!

>It appears that all the validations assume that a field is required.

That’s right, but you can easily go around this by making your own validator (gwt-vl is a library as it is a framework!), that uses a pre existing validator, that is only invoked when the field is non-empty.

I will create a feature request to add the behaviour to the standard validators.

Thanks for the suggestion!

Kind regards,

Anatol

Comment by admin — June 25, 2009 @ 10:54 pm


Hi!

Really great lib! Don’t you plan to put it in a maven repo somewhere?

Kind regards,
Gábor

Comment by Gábor Péntek — October 8, 2009 @ 8:48 am


Hi Gabor!

I will add a feature request for this and hope to have a repository up soon!

Kind regards, Anatol

Comment by admin — October 9, 2009 @ 11:36 pm


Hi, I’m using the gwt-vl (0.9b2-SNAPSHOT) and I found some thinks:

* In the class IntegerValidator you forgot to check if the field is required
* If you use com.google.gwt.i18n.client.NumberFormat in the DoubleValidator and FloatValidator you can validate a field considering the locale.
* In the validators you could use the interface HastText in place of TextBoxBase and SuggestBox

Finally, I liked a lot of your framework and I extend It to support Portuguese language. If you want I can send the files to you.

Best Regards

Comment by Itamar Sakae Viana Hata — February 4, 2010 @ 7:52 pm


Hi thanks for your comments,
sure you can send me the translation to my email.

Regards, Anatol

Comment by admin — February 15, 2010 @ 1:24 pm


Hi!

I’m trying to use the lib. Nice job. It works fine.
Could you help me, documenting the configuration to use specific validation messages (French is my need) and description (on TextBox focus for example)

Regards,

Olivier.

Comment by Olivier — February 15, 2010 @ 7:48 pm


Хм

Trackback by Kristina — March 10, 2010 @ 8:56 pm


Прив

Спасибо

Trackback by Коля — April 6, 2010 @ 11:57 pm


Спасибо

Хм..

Trackback by Валентин — April 9, 2010 @ 4:33 am


Прив

Хм..

Trackback by Арсений — April 10, 2010 @ 12:17 am


СПС.

Я тут

Trackback by Сергей — May 26, 2010 @ 3:44 pm


СПС.

Я тут

Trackback by Костя — May 28, 2010 @ 12:47 pm


СПС.

Я тут

Trackback by Ольга — May 30, 2010 @ 2:29 pm


Pillspot.org. Canadian Health&Care.Special Internet Prices(up to 40% off average US price).No prescription online pharmacy.PillSpot.org. Vitamins@buy.online” rel=”nofollow”>.…

Categories: Skin Care.Blood Pressure/Heart.Anti-allergic/Asthma.Weight Loss.Anxiety/Sleep Aid.Antibiotics.Antidiabetic.Mens Health.Antiviral.Mental Health/Epilepsy.Womens Health.Cholesterol.Antidepressants.Vitamins/Herbal Supplements.Stop SmokingS…

Trackback by MARION — June 25, 2010 @ 1:23 pm



Pillspot.org. Canadian Health&Care.Special Internet Prices.Best quality drugs.No prescription online pharmacy. Low price pills. Buy pills online

Buy:Lipothin.Prozac.Ventolin.Nymphomax.Aricept.Zocor.Female Cialis.Seroquel.Advair.Female Pink Viagra.Buspar.Benicar.Amoxicillin.Cozaar.Acomplia.SleepWell.Wellbutrin SR.Zetia.Lasix.Lipitor….

Trackback by DAVID — July 4, 2010 @ 5:06 am


2008 http://yprestoi-jb8i.ACEHARDWAREE.INFO/tag/2008+R2+fryer/ : 2008…

2008…

Trackback by R2 — August 29, 2010 @ 12:09 pm


of http://ipicturerx68pvk.AUTOPARTSTHAI.INFO/tag/Office+of+Martin/ : Martin…

Martin…

Trackback by of — August 29, 2010 @ 11:05 pm


Discount http://dsheepzrs.AUTOSECTIONS.INFO/tag/Discount+lights+Lights/ : lights…

lights…

Trackback by Lights — August 30, 2010 @ 7:27 am


RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress