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

Carl Franks fireartist at gmail.com
Wed Apr 4 16:15:35 GMT 2007


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.

Carl



More information about the Html-widget mailing list