RFC Forms

Work in Progress

The Problem

Consistency in form generation, validation.

I have a common pattern whereby I handle many forms for different aspects of an application where the HTML/RSP representation resides in many different files, fields are for the most part hand-coded and validation logic is specified elsewhere. This introduces some maintainence/revision challenges:

• If I switch to a different CSS framework, I have to change the HTML layout on every page
• If I change the data structure, I have to update the HTML/RSP code for every form that corresponds to that change in addition to changing the validation logic

Even where forms/validation specs are kept in a well-organised file structure, this introduces many points of failure as both the above scenarios require meticulous manual revision.

The Proposition

I’d like to create a form handler that takes one specification per form that can be used to both present forms in many UI environments and validate form submissions.

The specification would contain enough layout hints to pleasingly render in multiple front-end environments, whether that be Bootstrap (HTML), jQuery Mobile (HTML) or VID (Red or Rebol) requiring that only one template is necessary for each field type for a given environment.

The specification would also contain enough validation hints that would provide the above front-end environments with associated constraints, and where those constraints are insufficient, validation upon submission. Where a submission fails validation, the handler would offer hints toward resolving invalid fields.

Examples

registration: load-form [
    post %/users,register [
        fieldset "Your Details"
            label "Username:"
            user/id: field
                matches [1 15 [alphanum | #"_"]] else {Not a valid user name}

            label "Friendly Name:"
            user/name: string! else "Need your Real Name" length is between [3 40]
                else {This site requires you provide a name to sign your contributions}

            label "Email:"
            user/email: field email!
                else {This site requires a valid email address to register}

            label "Colour"
            user/colour: opt select string! from pairs [
                red "Red"
                orange "Orange"
                yellow "Yellow"
                green "Green"
                blue "Blue"
                indigo "Indigo"
                violet "Violet"
            ]

            label "Password:"
            user/password: field obscured length is between [6 20]
                else {Password should be between 6 and 20 characters}

                is confirmed by :user/confirmation
                else {Passwords do not match}

            label "Confirm Password:"
            user/confirmation: field obscured

            submit "Register"
        /fieldset
    ]
]

registration/render ; renders a blank form
registration/render/with user/data ; renders a blank form with 

either registration/validate [
    id "rgchris"
    name "Chris"
    email "rg.chris@gmail.com"
    ...
][
    user/inject registration/data
][
    registration/render ; renders with submitted data and error messages
]

Challenges

• Using external data for generating/validating forms, e.g. enumerated fields, unique fields
• Scaffolds: for Bootstrap, jQuery Mobile, VID
• Captchas
• Namespaces, e.g. user/name, user/id, etc.