[Html-widget] formfu - rfc: JS constraints demo

[Mario Minati]

Am Mittwoch 04 April 2007 17:15 schrieb Carl Franks:
> I've created a mock-up of how JS constraints could work.
>
> The demo form has 2 fields, equivalent to:
> ---
> elements:
>   - type: text
>     name: text1
>     filters:
>       - TrimEdges
>     constraints:
>       - Required
>   - type: text
>     name: text2
>     filters:
>       - TrimEdges
>     constraints:
>       - Required
>       - Integer
>
> The error checking in the demo is done both at 'onblur' and 'onsubmit'.
> The client-side error messages use the exact same markup and css as
> server-side error messages, so the user won't know any difference.
> If you try submitting the form while there's errors, the
> 'form_error_message' is displayed at the top of the form and the
> submission is cancelled.
> The error messages are hidden/displayed by mangling their class-names.
> All error messages are written to the page using javascript, so if the
> user has JS disabled, they won't see any error messages when the page
> first loads, and the form will be submitted to the server as normal.
>
> Please have a play about with it, and give feedback:
> http://www.fireartist.com/tmp/client-side-constraint.html
>
> At the moment, this isn't actually implemented in HMTL-FormFu, I've
> just edited the HTML created by it and added some javascript.
> There's still work needing done to figure out how to play nicely with
> constraints which can't be run client-side.
> It's implemented using Dojo, because trying to write cross-browser JS
> otherwise is a pig - but I'd prefer to eventually get it working with
> having to load an external JS library.
>
> I envisage filters being able to run at 'onchange', 'onblur' and
> 'onsubmit'. Constraints probably just at 'onblur' and 'onsubmit'.
> And inflators, validators and transformers won't be run client-side.

Hi Carl,

this is quite impressive, I like it.

Are you sure that the way you are handling showing and hiding field errors 
(switching between error_message and disabled_eror_message class) works even 
with more than one constraint defined. What happens when to constraints fail?

Do you plan a script element for every field? I would go for one script 
element which capsulates all need operations in functions, which can be 
called with the on... tags.

Greets,
Mario