[html-formfu] Clientside validation

[Carl Franks]

On 05/03/2008, Andreas Marienborg <omega at palle.net> wrote:
>
>  On Mar 5, 2008, at 10:54 AM, Carl Franks wrote:
>
>  > On 05/03/2008, Andreas Marienborg <omega at palle.net> wrote:
>  >> Has anyone done any clientside validation with FormFu? Basicly I want
>  >> to only specify constraints etc once, in the FormFu-config, and then
>  >> just have it magicaly work on the forms in the web app, or atleast
>  >> provide me with the information needed to do the client side stuff
>  >> (like what constraints are on a field etc).
>  >>
>  >> If that is not possible, is it possible to process only "part" of a
>  >> form? So I can call back to the server to check each field as they
>  >> are
>  >> filled out?
>  >>
>  >>
>  >> If anyone has any thoughts on any of this, I would be glad to hear it
>  >
>  > I put this JS demo together about a year ago.
>  > http://www.fireartist.com/tmp/client-side-constraint.html
>  >
>  > It supports filters & constraints and uses the same error markup that
>  > server-side validation would generate.
>  >
>  > At the moment, it uses an old version of dojo.
>  > It would probably be best to have the more advanced functionality
>  > (such as class name changes) isolated in core functions, and allow
>  > them to be implemented in different frameworks - and have the
>  > individual constraints, filters, etc only use standard JS.
>  > Although, if someone's willing to write the necessary functions in
>  > cross-browser JS so that we don't need an external library, that would
>  > be great.
>  >
>  > I created the branch /branches/auto-js for this, but have never
>  > checked the changes in, so I'll probably need to start from scratch as
>  > the internals have changed so much since the branch was made.
>  >
>  > I imagine it being implemented such that you can switch it on with
>  > something like:
>  >
>  >    clientside_validation: 1
>  >    clientside_library: 'Dojo'
>
>
> That sounds ideal. I would whip up a MochiKit implementation asap :p
>
>  However, is it possible to easily manipulate what is outputed, so as
>  to add information about constraints etc to the markup?

What exactly are you thinking of?

It's already possible to set classnames to include the constraint type
- see "%t" in
http://search.cpan.org/~cfranks/HTML-FormFu-0.02004/lib/HTML/FormFu.pm#auto_constraint_class

The way the demo works is: it adds the concepts of 'forced' errors.
The spans for forced-errors have a different classname and are hidden using CSS.
JS is used to put the error messages into the spans, so that users
without JS/CSS don't see the error message at all.
(If you've got JS switched on, but CSS turned off, then you'll see the
messages, but then it's a rather unlikely combination.

When the constraints are run, the classname is changed, so that the
appropriate message is either hidden or displayed.

Carl