Validate a FormData submission
A browser form submits fields as FormData and needs Yup validation before processing.
Conform · Function
parseWithYup
parseWithYup validates submitted FormData or URLSearchParams against a Yup schema and returns a Conform submission overview. It supports synchronous validation by default and asynchronous Yup validation when configured.
How it works
parseWithYup accepts submitted FormData or URLSearchParams and validates it against a Yup schema. It returns Conform’s submission overview, using synchronous validation by default or Yup’s asynchronous validate method when async is enabled.
Syntax
parseWithYup(payload, options)Parameters
| Name | Type | Description |
|---|---|---|
payload | FormData | URLSearchParams | FormData or URLSearchParams containing the submitted form values. |
options | object | Configuration containing the Yup schema and optional asynchronous-validation setting. |
options.schema | Schema | (() => Schema) | A Yup schema, or a function returning a Yup schema. |
options.async | boolean | When true, uses Yup validate instead of validateSync. |
Returns
A Conform submission overview produced by validating the payload with the provided Yup schema.
Key points
- The function parses submitted form data with a Yup schema and returns an overview of the submission.
- The payload can be FormData or URLSearchParams, matching the form submission mechanism.
- The schema option accepts either a Yup schema directly or a function producing a schema.
- The async option switches validation from Yup's synchronous method to its asynchronous validate method.
- The call takes the payload first and an options object second.
Common mistakes
- Set async to true when the schema requires Yup's asynchronous validate method; otherwise the helper uses validateSync.
Example: Parse FormData with a Yup schema
import { parseWithYup } from '@conform-to/yup';
import * as yup from 'yup';
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
});
const formData = new FormData();
formData.set('email', 'user@example.com');
formData.set('password', 'secret');
const submission = parseWithYup(formData, { schema });
console.log(submission.status);Creates a Yup schema, parses submitted FormData, and reads the resulting submission status.
When to use it
Validate URLSearchParams
A URL-encoded form submission must be checked against a Yup schema.
Use asynchronous Yup validation
Validation includes asynchronous Yup checks such as remote or deferred rules.
Provide a schema factory
A form’s schema must be generated dynamically for the validation call.
Interview questions
QWhat does parseWithYup do, and what can the schema option contain?
parseWithYup parses FormData or URLSearchParams with a supplied Yup schema and returns a submission overview. The schema option can be either a Yup schema or a function that returns one.
Follow-up: When would you pass a schema function? Use one when schema construction needs to be deferred or computed at validation time.
QHow does the async option change validation?
By default, parsing uses Yup's synchronous validateSync behavior. Set async to true to use Yup's validate method instead.
Follow-up: What is the practical consequence? The validation flow must handle the asynchronous result rather than assuming synchronous completion.
QWhich payload types does parseWithYup accept?
The payload may be a FormData object or a URLSearchParams object, depending on how the form was submitted. The helper then applies the configured Yup schema to that payload.
Follow-up: How would you support a form submitted through a standard multipart request? Pass its FormData payload to parseWithYup and configure the Yup schema for the fields.
Related
@conform-to/yupgetYupConstraintuseFormFormDataURLSearchParams