honojs-middleware/packages/conform-validator

Conform validator middleware for Hono

The validator middleware using conform for Hono applications. This middleware allows you to validate submitted FormValue and making better use of Hono RPC.

Usage

Zod:

import { z } from 'zod'
import { parseWithZod } from '@conform-to/zod'
import { conformValidator } from '@hono/conform-validator'
import { HTTPException } from 'hono/http-exception'

const schema = z.object({
  name: z.string(),
  age: z.string(),
})

app.post(
  '/author',
  conformValidator((formData) => parseWithZod(formData, { schema })),
  (c) => {
    const submission = c.req.valid('form')
    const data = submission.value

    return c.json({ success: true, message: `${data.name} is ${data.age}` })
  }
)

Yup:

import { object, string } from 'yup'
import { parseWithYup } from '@conform-to/yup'
import { conformValidator } from '@hono/conform-validator'
import { HTTPException } from 'hono/http-exception'

const schema = object({
  name: string(),
  age: string(),
})

app.post(
  '/author',
  conformValidator((formData) => parseWithYup(formData, { schema })),
  (c) => {
    const submission = c.req.valid('form')
    const data = submission.value
    return c.json({ success: true, message: `${data.name} is ${data.age}` })
  }
)

Valibot:

import { object, string } from 'valibot'
import { parseWithValibot } from 'conform-to-valibot'
import { conformValidator } from '@hono/conform-validator'
import { HTTPException } from 'hono/http-exception'

const schema = object({
  name: string(),
  age: string(),
})

app.post(
  '/author',
  conformValidator((formData) => parseWithYup(formData, { schema })),
  (c) => {
    const submission = c.req.valid('form')
    const data = submission.value
    return c.json({ success: true, message: `${data.name} is ${data.age}` })
  }
)

Custom Hook Option

By default, conformValidator() returns a SubmissionResult when a validation error occurs. If you wish to change this behavior, or if you wish to perform common processing, you can modify the response by passing a function as the second argument.

app.post(
  '/author',
  conformValidator(
    (formData) => parseWithYup(formData, { schema })
    (submission, c) => {
      if(submission.status !== 'success') {
        return c.json({ success: false, message: 'Bad Request' }, 400)
      }
    }
  ),
  (c) => {
    const submission = c.req.valid('form')
    const data = submission.value
    return c.json({ success: true, message: `${data.name} is ${data.age}` })
  }
)

[!NOTE] if a response is returned by the Hook function, subsequent middleware or handler functions will not be executed. see more.

Author

uttk https://github.com/uttk

License

MIT