Guillaume Lerouge wrote:

Tested it on the incubator, looks good (apart from the fact that the messages & colors you choosed are a bit rough to the eye and to the user ;-)

I used the default CSS provided by livevalidation. Of course, we can tweak that.

This could be quite handy to use on plenty of other forms in XWiki. How easy will it be to add to any of our numerous object-creation input fields (like create page, create blog post, new applications, basically any field we could think of)?

Easy. For example to add both presence and emai validation to a field, you add the following in a JSX object, var emailV = new LiveValidation( "register_email" , { validMessage: "OK.", wait: 500} ); // register_email is the id of the field to validate. emailV.add( Validate.Presence, { failureMessage: "Field is mandatory" } ); emailV.add( Validate.Email, { failureMessage: "Should be a valid email" } ); I said, if we want we can also write basic CSS-based set of rules, to allow doing validation using : <input class="validate-email" .... /> We just need to write a piece of JS that on loading will lookup for such classes and do the wiring. This would be for non-developers. Jerome.

+1 for me, Guillaume

On Thu, Feb 5, 2009 at 8:37 PM, Jerome Velociter <[email protected]> wrote:

...

Dear devs,

I propose we bundle the "validation as you type" livevalidation.js library [1] in XWiki, and use it to improve user experience on several forms in XWiki Enterprise (I can think of registration form, export wiki form, page creation panel, etc.) There are several advantages I see in livevalidation compared to the other libraries I took a glance at :

* It's small (12Kb minified) * It does not have any dependency (but there is version based on prototype available, too) * It is not intrusive. No need to modify the html structure or to add css classes to input fields to add validation. * It has an nice feature which allows you to precise the delay after which the validation should occur once the user stopped typing

If you want to see it "live" in XWiki, I added some basic presence, password confirm and email validation on the register form on http://incubator.myxwiki.org

CSS-class based validation seems to be in some sort of fashion, though I'm personally not very convince we can express all our validation using only class names (sounds intricate to do cross-field validation for example, or to validate against a custom regular expression), and for us it is not really an option right now, since we would need to make modifications in the core of XWiki for object fields displayer to add the proper class names to the inputs when calling APIs like $doc.display (or do it in javascript, but the CSS-based becomes pointless then). Last, if we really want class based validation, I believe building it with prototype and livevalidation would be very easy.

Here are the other alternative I looked at rapidly:

* JS-Validate [2] 67 Kb, requires prototype + scriptaculous, CSS-based , licence? * really-easy-field-validation [3] requires prototype, CSS + JS based, MIT licence * wForms [4] 81Kb minified, CSS-based , LGPL

Better alternatives you would see?

Otherwise, my +1 for livevalidation,

Regards, Jerome.

[1] http://www.livevalidation.com/ [2] http://www.jsvalidate.com/ [3] http://tetlaw.id.au/view/javascript/really-easy-field-validation [4] http://code.google.com/p/wforms/ _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs

Guillaume Lerouge wrote:

Hi,

On Fri, Feb 6, 2009 at 10:04 AM, Jerome Velociter <[email protected]> wrote:

...

Guillaume Lerouge wrote:

...

Tested it on the incubator, looks good (apart from the fact that the messages & colors you choosed are a bit rough to the eye and to the user ;-)

I used the default CSS provided by livevalidation. Of course, we can tweak that.

...

This could be quite handy to use on plenty of other forms in XWiki. How easy will it be to add to any of our numerous object-creation input fields (like create page, create blog post, new applications, basically any field we could think of)? Easy. For example to add both presence and emai validation to a field, you add the following in a JSX object,

var emailV = new LiveValidation( "register_email" , { validMessage: "OK.", wait: 500} ); // register_email is the id of the field to validate. emailV.add( Validate.Presence, { failureMessage: "Field is mandatory" } ); emailV.add( Validate.Email, { failureMessage: "Should be a valid email" } );

I said, if we want we can also write basic CSS-based set of rules, to allow doing validation using :

<input class="validate-email" .... />

We just need to write a piece of JS that on loading will lookup for such classes and do the wiring. This would be for non-developers.

Looks good. 2 additional questions:

- cross-browser compatibility?

Didn't checked yet. I'll let you know here

- internationalization?

That's not an issue, we can use $msg.get in JSX Jerome.

Guillaume

...

Jerome.

...

+1 for me, Guillaume

On Thu, Feb 5, 2009 at 8:37 PM, Jerome Velociter <[email protected]> wrote:

...

Dear devs,

I propose we bundle the "validation as you type" livevalidation.js library [1] in XWiki, and use it to improve user experience on several forms in XWiki Enterprise (I can think of registration form, export wiki form, page creation panel, etc.) There are several advantages I see in livevalidation compared to the other libraries I took a glance at :

* It's small (12Kb minified) * It does not have any dependency (but there is version based on prototype available, too) * It is not intrusive. No need to modify the html structure or to add css classes to input fields to add validation. * It has an nice feature which allows you to precise the delay after which the validation should occur once the user stopped typing

If you want to see it "live" in XWiki, I added some basic presence, password confirm and email validation on the register form on http://incubator.myxwiki.org

CSS-class based validation seems to be in some sort of fashion, though I'm personally not very convince we can express all our validation using only class names (sounds intricate to do cross-field validation for example, or to validate against a custom regular expression), and for us it is not really an option right now, since we would need to make modifications in the core of XWiki for object fields displayer to add the proper class names to the inputs when calling APIs like $doc.display (or do it in javascript, but the CSS-based becomes pointless then). Last, if we really want class based validation, I believe building it with prototype and livevalidation would be very easy.

Here are the other alternative I looked at rapidly:

* JS-Validate [2] 67 Kb, requires prototype + scriptaculous, CSS-based , licence? * really-easy-field-validation [3] requires prototype, CSS + JS based, MIT licence * wForms [4] 81Kb minified, CSS-based , LGPL

Better alternatives you would see?

Otherwise, my +1 for livevalidation,

Regards, Jerome.

[1] http://www.livevalidation.com/ [2] http://www.jsvalidate.com/ [3] http://tetlaw.id.au/view/javascript/really-easy-field-validation [4] http://code.google.com/p/wforms/ _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs

_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs