Skip to content

feat: add formData schema, checkbox action, and formDataEntries action #1142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

EskiMojo14
Copy link
Contributor

Given a form:

<form enctype="multipart/form-data" method="post">
  <input name="username" type="text" />
  <label>
    <input type="checkbox" name="accepted" />
    Accept T&Cs
  </label>
  <fieldset>
    <legend>Contact me</legend>
    <label>
      <input type="checkbox" name="contact" value="SMS" />
      SMS
    </label>
    <label>
      <input type="checkbox" name="contact" value="Email" />
      Email
    </label>
  </fieldset>
</form>

You could validate it:

const FormSchema = v.pipe(
  v.formData(),
  v.formDataEntries(["contact"]),
  v.object({
    username: v.string(),
    accepted: v.pipe(v.string(), v.checkbox(), v.literal(true))
    contact: v.array(v.string())
  })
)

Copy link

vercel bot commented Apr 9, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
valibot ❌ Failed (Inspect) May 20, 2025 1:39pm

@fabian-hiller
Copy link
Owner

fabian-hiller commented Apr 10, 2025

Thanks your for this PR! I think I would recommend using a library like decode-formdata instead for such use cases: https://github.com/fabian-hiller/decode-formdata

What do you think?

@EskiMojo14
Copy link
Contributor Author

EskiMojo14 commented Apr 10, 2025

Thanks your for this PR! I think I would recommend using a library like decode-formdata instead for such use cases: https://github.com/fabian-hiller/decode-formdata

What do you think?

For more complex forms, I agree:

* For more complex uses, consider {@link https://github.com/fabian-hiller/decode-formdata decode-formdata}.

I still think there could be room for a built-in alternative for simpler forms, and then the user can switch when they need.

Alternatively, it could be interesting to have an action wrapper for decode-formdata:

v.pipe(
  v.formData(),  
  decodeFormData({
    arrays: ['tags', 'images'],
    booleans: ['active'],
    dates: ['created', 'images.$.created'],
    files: ['images.$.file'],
    numbers: ['price'],
  }),
  finalSchema
)

@fabian-hiller
Copy link
Owner

Yes, you are right. decode-formdata is too opinionated to provide an official schema or actions based on it. I will think about following your recommendation and provide a formData schema and a basic decodeFormData action that just converts the entries to a JS object without any special behaviour.

What is your use case for using v.pipe(v.formData(), v.decodeFormData())? Why not do the decoding before and pass the result to Valibot. I ask because I want to evaluate if we should add it, as there is always a downside when extending the API interface of the library.

@EskiMojo14
Copy link
Contributor Author

EskiMojo14 commented Apr 20, 2025

just preference really - i like having the transformation contained in the schema, rather than having to do it separately before feeding it in

similar to the json methods from #1137

@fabian-hiller
Copy link
Owner

fabian-hiller commented Apr 20, 2025

Maybe it is a good idea to mention on what we are woking on in our v1.1 blog post so people can reach out if they are interested in this PR.

@fabian-hiller fabian-hiller requested a review from Copilot April 20, 2025 00:40
@fabian-hiller fabian-hiller self-assigned this Apr 20, 2025
@fabian-hiller fabian-hiller added the enhancement New feature or request label Apr 20, 2025
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces new schema and action functionality to handle formData and checkbox inputs. Key changes include:

  • Adding a new formData schema along with its tests.
  • Creating a formDataEntries transformation action to convert FormData into an object.
  • Implementing a checkbox action to convert checkbox string values to booleans.

Reviewed Changes

Copilot reviewed 30 out of 34 changed files in this pull request and generated no comments.

Show a summary per file
File Description
website/src/routes/api/(actions)/formDataEntries/properties.ts Adds property definitions for formDataEntries action.
website/src/routes/api/(actions)/checkbox/properties.ts Adds property definitions for checkbox action.
library/src/schemas/formData/* Introduces formData schema, implementation, and tests.
library/src/actions/formDataEntries/* Implements formDataEntries action with tests and type definitions.
library/src/actions/checkbox/* Implements checkbox action with tests and type definitions.
Files not reviewed (4)
  • library/tsconfig.json: Language not supported
  • website/src/routes/api/(actions)/checkbox/index.mdx: Language not supported
  • website/src/routes/api/(actions)/formDataEntries/index.mdx: Language not supported
  • website/src/routes/api/(schemas)/formData/index.mdx: Language not supported

@fabian-hiller fabian-hiller added this to the v1.2 milestone Apr 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants