formkit / formkit

Vue Forms ⚡️ Supercharged
https://formkit.com
MIT License
4.07k stars 154 forks source link

feat(nuxt): add initial server-side validation #1309

Closed danielroe closed 1 month ago

danielroe commented 1 month ago

This is a work-in-progress PR to add automatic server-side form validation based on re-rendering a formkit form and populating it with data.

It adds the following server-side utils:

  1. validateFormkitData - this allows you to validate specific data, for a lower-level validation:

    await validateFormkitData (event, '/path/form/was/submitted/from', 'form-id', { data: 'that-was-submitted' })
  2. defineFormkitEventHandler - this automatically validates data being passed on an endpoint, for use with action="/api/endpoint" for formkit forms in future. (It shouldn't be used on its own.)

    export default defineFormkitEventHandler(async (event) => {
     const { data } = await readBody(event)
     return { ...data, validated: true }
    }, 'test-form')

Key points for review:

Next steps:

  1. Automatic assignment/extraction of ID when action="" is applied to a form, so no need for allowlisting in the event handler.
  2. Handle form submission state (pending/loading spinner, automatic submission of form id, data + route).

Co-authored-by: Justin Schroeder justin@formkit.com