({ initialReport: 'onBlur', - onValidate({ form }) { - return form.reportValidity(); - }, onSubmit: (event, { submission }) => { event.preventDefault(); diff --git a/examples/nested/src/App.tsx b/examples/nested/src/App.tsx index 9b5599eb..2ae55f07 100644 --- a/examples/nested/src/App.tsx +++ b/examples/nested/src/App.tsx @@ -11,9 +11,6 @@ interface Payment { export default function PaymentForm() { const form = useForm({ - onValidate({ form }) { - return form.reportValidity(); - }, onSubmit(event, { submission }) { event.preventDefault(); diff --git a/examples/remix/app/routes/index.tsx b/examples/remix/app/routes/index.tsx index 2fe66ea5..0d6cd2f3 100644 --- a/examples/remix/app/routes/index.tsx +++ b/examples/remix/app/routes/index.tsx @@ -5,7 +5,7 @@ import { useFieldList, conform, parse, - reportValidity, + setFormError, } from '@conform-to/react'; import { getError } from '@conform-to/zod'; import type { ActionArgs } from '@remix-run/node'; @@ -28,9 +28,7 @@ export let action = async ({ request }: ActionArgs) => { const formData = await request.formData(); const submission = parse(formData); const result = todoSchema.safeParse(submission.value); - const error = !result.success - ? submission.error.concat(getError(result.error, submission.scope)) - : submission.error; + const error = submission.error.concat(getError(result)); switch (submission.type) { case 'validate': { @@ -59,14 +57,12 @@ export default function TodoForm() { state, onValidate({ form, submission }) { const result = todoSchema.safeParse(submission.value); - const error = !result.success - ? submission.error.concat(getError(result.error, submission.scope)) - : submission.error; - return reportValidity(form, { - ...submission, - error, - }); + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); + } + + setFormError(form, submission); }, onSubmit(event, { submission }) { switch (submission.type) { diff --git a/examples/server-validation/app/routes/index.tsx b/examples/server-validation/app/routes/index.tsx index 4fcca380..cd07aabc 100644 --- a/examples/server-validation/app/routes/index.tsx +++ b/examples/server-validation/app/routes/index.tsx @@ -1,11 +1,12 @@ -import type { FormState } from '@conform-to/react'; +import type { Submission } from '@conform-to/react'; import { conform, parse, useFieldset, useForm, hasError, - reportValidity, + shouldValidate, + setFormError, } from '@conform-to/react'; import { getError } from '@conform-to/zod'; import type { ActionArgs } from '@remix-run/node'; @@ -43,27 +44,20 @@ export let action = async ({ request }: ActionArgs) => { * (1) `submission.value`: Structured form value based on the name (path) * (2) `submission.error`: Error (if any) while parsing the FormData object, * (3) `submission.type` : Type of the submission. - * Set only when the user click on named button with pattern (`conform/${type}`), - * e.g. `validate` - * (4) `submission.scope`: Scope of the submission. Name of the fields that should be validated. - * e.g. The scope will be `name` only when the user is typing on the name field. + * The type would be `undefined` when user click on any normal submit button. + * It would be set only when the user click on named button with pattern (`conform/${type}`), + * e.g. Conform is clicking on a button with name `conform/validate` when validating, so the type would be `valdiate`. */ const submission = parse(formData); const result = await schema + // Async validation. e.g. checking uniqueness .refine( - async (employee) => { - // Zod does - if (!submission.scope.includes('email')) { - return true; - } - - // Async validation. e.g. checking uniqueness - return new Promise((resolve) => { + async (employee) => + new Promise((resolve) => { setTimeout(() => { resolve(employee.email === 'hey@conform.guide'); }, Math.random() * 100); - }); - }, + }), { message: 'Email is already used', path: ['email'], @@ -74,11 +68,8 @@ export let action = async ({ request }: ActionArgs) => { // Return the state to the client if the submission is made for validation purpose if (!result.success || submission.type === 'validate') { return json({ - scope: submission.scope, - value: submission.value, - error: submission.error.concat( - !result.success ? getError(result.error, submission.scope) : [], - ), + ...submission, + error: submission.error.concat(getError(result)), }); } @@ -87,9 +78,9 @@ export let action = async ({ request }: ActionArgs) => { return redirect('/'); }; -export default function TodoForm() { - // FormState returned from the server - const state = useActionData>(); +export default function EmployeeForm() { + // Last submission returned from the server + const state = useActionData>(); /** * The useForm hook now returns a `Form` object @@ -98,12 +89,17 @@ export default function TodoForm() { * (2) form.config: Fieldset config to be passed to the useFieldset hook. * [Optional] Needed only if the fields have default value / nojs support is needed) * (3) form.ref: Ref object of the form element. Same as `form.props.ref` - * (4) form.error: Form error. Set when an error with an empty string name is provided by the form state. + * (4) form.error: Form error. Set when an error with an empty string name is provided. */ const form = useForm({ + // Enable server validation mode + mode: 'server-validation', + + // Begin validating on blur + initialReport: 'onBlur', + // Just hook it up with the result from useActionData() state, - initialReport: 'onBlur', /** * The validate hook - `onValidate(context: FormContext): boolean` @@ -111,50 +107,33 @@ export default function TodoForm() { * * (1) Renamed from `validate` to `onValidate` * (2) Changed the function signature with a new context object, including `form`, `formData` and `submission` - * (3) It should now returns a boolean indicating if the server validation is needed * * If both `onValidate` and `onSubmit` are commented out, then it will validate the form completely by server validation */ onValidate({ form, submission }) { // Similar to server validation without the extra refine() const result = schema.safeParse(submission.value); - const error = submission.error.concat( - !result.success ? getError(result.error) : [], - ); - /** - * Since only `email` requires extra validation from the server. - * We skip reporting client error if the email is being validated while there is no error found from the client. - * e.g. Client validation would be enough if the email is invalid - */ - if (submission.scope.includes('email') && !hasError(error, 'email')) { - // Server validation is needed - return true; + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); + } + + if ( + shouldValidate(submission, 'email') && + !hasError(submission.error, 'email') + ) { + // Skip reporting client error + throw form; } /** - * The `reportValidity` helper does 2 things for you: - * (1) Set all error to the dom and trigger the `invalid` event through `form.reportValidity()` - * (2) Return whether the form is valid or not. If the form is invalid, stop it. + * Set the submission error to the dom */ - return reportValidity(form, { - ...submission, - error, - }); + setFormError(form, submission); }, - async onSubmit(event, { submission }) { - /** - * The `onSubmit` hook will be called only if `onValidate` returns true, - * or when `noValidate` / `formNoValidate` is configured - */ - switch (submission.type) { - case 'validate': { - if (submission.data !== 'email') { - // We need server validation only for the email field, stop the rest - event.preventDefault(); - } - break; - } + onSubmit(event, { submission }) { + if (submission.type === 'validate' && submission.metadata !== 'email') { + event.preventDefault(); } }, }); diff --git a/examples/validation/src/App.tsx b/examples/validation/src/App.tsx index 4e7121a6..4d2496ad 100644 --- a/examples/validation/src/App.tsx +++ b/examples/validation/src/App.tsx @@ -10,7 +10,7 @@ export default function SignupForm() { const form = useForm({ onValidate({ form, submission }) { for (const field of Array.from(form.elements)) { - if (isFieldElement(field) && submission.scope.includes(field.name)) { + if (isFieldElement(field)) { switch (field.name) { case 'email': if (field.validity.valueMissing) { diff --git a/examples/yup/src/App.tsx b/examples/yup/src/App.tsx index 05fd1438..18b6e007 100644 --- a/examples/yup/src/App.tsx +++ b/examples/yup/src/App.tsx @@ -1,4 +1,4 @@ -import { useFieldset, useForm, reportValidity } from '@conform-to/react'; +import { useFieldset, useForm, setFormError } from '@conform-to/react'; import { getError } from '@conform-to/yup'; import * as yup from 'yup'; @@ -26,9 +26,7 @@ export default function SignupForm() { }); } catch (error) { if (error instanceof yup.ValidationError) { - submission.error = submission.error.concat( - getError(error, submission.scope), - ); + submission.error = submission.error.concat(getError(error)); } else { submission.error = submission.error.concat([ ['', 'Validation failed'], @@ -36,7 +34,7 @@ export default function SignupForm() { } } - return reportValidity(form, submission); + setFormError(form, submission); }, onSubmit: async (event, { submission }) => { event.preventDefault(); diff --git a/examples/zod/src/App.tsx b/examples/zod/src/App.tsx index f89cb198..7823e003 100644 --- a/examples/zod/src/App.tsx +++ b/examples/zod/src/App.tsx @@ -1,4 +1,4 @@ -import { reportValidity, useFieldset, useForm } from '@conform-to/react'; +import { setFormError, useFieldset, useForm } from '@conform-to/react'; import { getError } from '@conform-to/zod'; import { z } from 'zod'; @@ -24,12 +24,11 @@ export default function SignupForm() { onValidate({ form, submission }) { const result = schema.safeParse(submission.value); - return reportValidity(form, { - ...submission, - error: !result.success - ? submission.error.concat(getError(result.error, submission.scope)) - : submission.error, - }); + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); + } + + setFormError(form, submission); }, onSubmit: async (event, { submission }) => { event.preventDefault(); diff --git a/packages/conform-dom/index.ts b/packages/conform-dom/index.ts index d88ddecb..b9bd4f93 100644 --- a/packages/conform-dom/index.ts +++ b/packages/conform-dom/index.ts @@ -36,22 +36,18 @@ export type FieldsetConstraint> = { [Key in keyof Schema]?: FieldConstraint; }; -export type FormState = { - scope: string[]; - value: FieldValue; - error: Array<[string, string]>; -}; - -export type Submission = FormState & - ( - | { - type?: undefined; - } - | { - type: string; - data: string; - } - ); +export type Submission = + | { + type?: undefined; + value: FieldValue; + error: Array<[string, string]>; + } + | { + type: string; + metadata: string; + value: FieldValue; + error: Array<[string, string]>; + }; export function isFieldElement(element: unknown): element is FieldElement { return ( @@ -112,6 +108,10 @@ export function getName(paths: Array): string { }, ''); } +export function shouldValidate(submission: Submission, name: string): boolean { + return submission.type !== 'validate' || submission.metadata === name; +} + export function hasError( error: Array<[string, string]>, name: string, @@ -123,21 +123,24 @@ export function hasError( ); } -export function reportValidity( +export function setFormError( form: HTMLFormElement, - state: FormState, -): boolean { - const firstErrorByName = Object.fromEntries([...state.error].reverse()); + submission: Submission, +): void { + const firstErrorByName = Object.fromEntries([...submission.error].reverse()); for (const element of form.elements) { - if (!isFieldElement(element) || !state.scope.includes(element.name)) { - continue; - } + if (isFieldElement(element)) { + const error = firstErrorByName[element.name]; - element.setCustomValidity(firstErrorByName[element.name] ?? ''); + if ( + typeof error !== 'undefined' || + shouldValidate(submission, element.name) + ) { + element.setCustomValidity(error ?? ''); + } + } } - - return form.reportValidity(); } export function setValue( @@ -207,10 +210,7 @@ export function getFormElement( return form; } -export function focusFirstInvalidField( - form: HTMLFormElement, - fields?: string[], -): void { +export function focusFirstInvalidField(form: HTMLFormElement): void { const currentFocus = document.activeElement; if ( @@ -227,8 +227,7 @@ export function focusFirstInvalidField( if ( !field.validity.valid && field.dataset.conformTouched && - field.tagName !== 'BUTTON' && - (!fields || fields.includes(field.name)) + field.tagName !== 'BUTTON' ) { field.focus(); break; @@ -253,7 +252,6 @@ export function parse>( let submission: Submission> = { value: {}, error: [], - scope: [''], }; try { @@ -274,26 +272,10 @@ export function parse>( submission = { ...submission, type: submissionType, - data: value, + metadata: value, }; } else { const paths = getPaths(name); - const scopes = paths.reduce((result, path) => { - if (result.length === 0) { - if (typeof path !== 'string') { - throw new Error(`Invalid name received: ${name}`); - } - - result.push(path); - } else { - const [lastName] = result.slice(-1); - result.push(getName([lastName, path])); - } - - return result; - }, []); - - submission.scope.push(...scopes); setValue(submission.value, paths, (prev) => { if (prev) { @@ -306,11 +288,6 @@ export function parse>( } switch (submission.type) { - case 'validate': - if (typeof submission.data !== 'undefined' && submission.data !== '') { - submission.scope = [submission.data]; - } - break; case 'list': submission = handleList(submission); break; @@ -322,9 +299,6 @@ export function parse>( ]); } - // Remove duplicates - submission.scope = Array.from(new Set(submission.scope)); - return submission as Submission; } @@ -406,7 +380,7 @@ export function handleList( return submission; } - const command = parseListCommand(submission.data); + const command = parseListCommand(submission.metadata); const paths = getPaths(command.scope); setValue(submission.value, paths, (list) => { @@ -417,8 +391,5 @@ export function handleList( return updateList(list, command); }); - return { - ...submission, - scope: [command.scope], - }; + return submission; } diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts index eac8f65a..08350f4d 100644 --- a/packages/conform-react/hooks.ts +++ b/packages/conform-react/hooks.ts @@ -3,7 +3,6 @@ import { type FieldElement, type FieldValue, type FieldsetConstraint, - type FormState, type ListCommand, type Primitive, type Submission, @@ -17,8 +16,8 @@ import { parse, parseListCommand, requestSubmit, - reportValidity, requestValidate, + setFormError, updateList, } from '@conform-to/dom'; import { @@ -38,6 +37,11 @@ interface FormContext> { } export interface FormConfig> { + /** + * Validation mode. Default to `client-only`. + */ + mode?: 'client-only' | 'server-validation'; + /** * Define when the error should be reported initially. * Support "onSubmit", "onChange", "onBlur". @@ -54,7 +58,7 @@ export interface FormConfig> { /** * An object describing the state from the last submission */ - state?: FormState; + state?: Submission; /** * Enable native validation before hydation. @@ -73,7 +77,7 @@ export interface FormConfig> { /** * A function to be called when the form should be (re)validated. */ - onValidate?: (context: FormContext) => boolean; + onValidate?: (context: FormContext) => void; /** * The submit event handler of the form. It will be called @@ -120,15 +124,11 @@ export function useForm>( const [fieldsetConfig, setFieldsetConfig] = useState>( () => { const error = config.state?.error ?? []; - const scope = config.state?.scope; return { defaultValue: config.state?.value ?? config.defaultValue, initialError: error.filter( - ([name]) => - name !== '' && - getSubmissionType(name) === null && - (!scope || scope.includes(name)), + ([name]) => name !== '' && getSubmissionType(name) === null, ), }; }, @@ -152,8 +152,10 @@ export function useForm>( return; } - if (!reportValidity(form, config.state)) { - focusFirstInvalidField(form, config.state.scope); + setFormError(form, config.state); + + if (!form.reportValidity()) { + focusFirstInvalidField(form); } requestSubmit(form); @@ -308,23 +310,30 @@ export function useForm>( } } - if ( - typeof config.onValidate === 'function' && - !config.noValidate && - !submitter.formNoValidate - ) { - try { - if (!config.onValidate(context)) { + try { + if (!config.noValidate && !submitter.formNoValidate) { + config.onValidate?.(context); + + if (!form.reportValidity()) { focusFirstInvalidField(form); event.preventDefault(); } - } catch (e) { + } + } catch (e) { + if (e !== form) { console.warn(e); } } if (!event.defaultPrevented) { - config.onSubmit?.(event, context); + if ( + config.mode !== 'server-validation' && + submission.type === 'validate' + ) { + event.preventDefault(); + } else { + config.onSubmit?.(event, context); + } } }, }, @@ -443,58 +452,6 @@ export function useFieldset>( }); useEffect(() => { - /** - * Reset the error state of each field if its validity is changed. - * - * This is a workaround as no official way is provided to notify - * when the validity of the field is changed from `invalid` to `valid`. - */ - const resetError = (form: HTMLFormElement) => { - setError((prev) => { - let next = prev; - - const fieldsetName = configRef.current?.name ?? ''; - - for (const field of form.elements) { - if (isFieldElement(field) && field.name.startsWith(fieldsetName)) { - const [key, ...paths] = getPaths( - fieldsetName.length > 0 - ? field.name.slice(fieldsetName.length + 1) - : field.name, - ); - - if (typeof key === 'string' && paths.length === 0) { - const prevMessage = next?.[key] ?? ''; - const nextMessage = field.validationMessage; - - /** - * Techincally, checking prevMessage not being empty while nextMessage being empty - * is sufficient for our usecase. It checks if the message is changed instead to allow - * the hook to be useful independently. - */ - if (prevMessage !== '' && prevMessage !== nextMessage) { - next = { - ...next, - [key]: nextMessage, - }; - } - } - } - } - - return next; - }); - }; - const handleInput = (event: Event) => { - const form = getFormElement(ref.current); - const field = event.target; - - if (!form || !isFieldElement(field) || field.form !== form) { - return; - } - - resetError(form); - }; const invalidHandler = (event: Event) => { const form = getFormElement(ref.current); const field = event.target; @@ -542,8 +499,36 @@ export function useFieldset>( return; } - // This helps resetting error that fullfilled by the submitter - resetError(form); + /** + * Reset the error state of each field if its validity is changed. + * + * This is a workaround as no official way is provided to notify + * when the validity of the field is changed from `invalid` to `valid`. + */ + setError((prev) => { + let next = prev; + + const fieldsetName = configRef.current?.name ?? ''; + + for (const field of form.elements) { + if (isFieldElement(field) && field.name.startsWith(fieldsetName)) { + const key = fieldsetName + ? field.name.slice(fieldsetName.length + 1) + : field.name; + const prevMessage = next?.[key] ?? ''; + const nextMessage = field.validationMessage; + + if (prevMessage !== '' && nextMessage === '') { + next = { + ...next, + [key]: '', + }; + } + } + } + + return next; + }); }; const resetHandler = (event: Event) => { const form = getFormElement(ref.current); @@ -564,14 +549,12 @@ export function useFieldset>( setError({}); }; - document.addEventListener('input', handleInput); // The invalid event does not bubble and so listening on the capturing pharse is needed document.addEventListener('invalid', invalidHandler, true); document.addEventListener('submit', submitHandler); document.addEventListener('reset', resetHandler); return () => { - document.removeEventListener('input', handleInput); document.removeEventListener('invalid', invalidHandler, true); document.removeEventListener('submit', submitHandler); document.removeEventListener('reset', resetHandler); diff --git a/packages/conform-react/index.ts b/packages/conform-react/index.ts index 11012e73..a0c12caf 100644 --- a/packages/conform-react/index.ts +++ b/packages/conform-react/index.ts @@ -1,11 +1,11 @@ export { type FieldsetConstraint, - type FormState, type Submission, hasError, isFieldElement, parse, - reportValidity, + setFormError, + shouldValidate, } from '@conform-to/dom'; export * from './hooks'; export * as conform from './helpers'; diff --git a/packages/conform-yup/index.ts b/packages/conform-yup/index.ts index 7ef76654..819ac65a 100644 --- a/packages/conform-yup/index.ts +++ b/packages/conform-yup/index.ts @@ -84,15 +84,10 @@ export function getFieldsetConstraint( export function getError( error: yup.ValidationError | null, - scope?: string[], ): Array<[string, string]> { return ( error?.inner.reduce>((result, e) => { - const name = e.path ?? ''; - - if (!scope || scope.includes(name)) { - result.push([name, e.message]); - } + result.push([e.path ?? '', e.message]); return result; }, []) ?? [] diff --git a/packages/conform-zod/index.ts b/packages/conform-zod/index.ts index 01c37d30..583ce256 100644 --- a/packages/conform-zod/index.ts +++ b/packages/conform-zod/index.ts @@ -108,21 +108,25 @@ export function getFieldsetConstraint( return result; } -export function getError( - error: z.ZodError | null, - scope?: string[], +export function getError( + result: z.SafeParseReturnType | z.ZodError, ): Array<[string, string]> { - return ( - error?.errors.reduce>((result, e) => { - const name = getName(e.path); + const issues = + result instanceof z.ZodError + ? result.errors + : !result.success + ? result.error.errors + : null; - if (!scope || scope.includes(name)) { - result.push([name, e.message]); - } + if (!issues) { + return []; + } + + return issues.reduce>((result, e) => { + result.push([getName(e.path), e.message]); - return result; - }, []) ?? [] - ); + return result; + }, []); } export function ifNonEmptyString( diff --git a/playground/app/components.tsx b/playground/app/components.tsx index 5dd8aa15..2fbedd91 100644 --- a/playground/app/components.tsx +++ b/playground/app/components.tsx @@ -1,4 +1,4 @@ -import type { FormState } from '@conform-to/react'; +import type { Submission } from '@conform-to/react'; import type { ReactNode } from 'react'; import { useEffect, useState } from 'react'; @@ -6,7 +6,7 @@ interface PlaygroundProps { title: string; description?: string; form?: string; - state?: FormState>; + state?: Submission>; children: ReactNode; } @@ -17,10 +17,10 @@ export function Playground({ state, children, }: PlaygroundProps) { - const [status, setFormState] = useState(state ?? null); + const [submission, setSubmission] = useState(state ?? null); useEffect(() => { - setFormState(state ?? null); + setSubmission(state ?? null); }, [state]); return ( @@ -35,17 +35,17 @@ export function Playground({ {description} - {status ? ( + {submission ? ( Submission 0 + submission.error.length > 0 ? 'border-pink-600' : 'border-emerald-500' } pl-4 py-2 mt-4`} > - {JSON.stringify(status, null, 2)} + {JSON.stringify(submission, null, 2)} ) : null} @@ -59,7 +59,7 @@ export function Playground({ setFormState(null)} + onClick={() => setSubmission(null)} form={form} > Submit @@ -67,7 +67,7 @@ export function Playground({ setFormState(null)} + onClick={() => setSubmission(null)} form={form} > Reset diff --git a/playground/app/config.ts b/playground/app/config.ts index dedbec51..4cd2298c 100644 --- a/playground/app/config.ts +++ b/playground/app/config.ts @@ -2,6 +2,7 @@ import { ifNonEmptyString } from '@conform-to/zod'; import { z } from 'zod'; const formConfig = z.object({ + mode: z.enum(['client-only', 'server-validation']).optional(), initialReport: z.enum(['onSubmit', 'onChange', 'onBlur']).optional(), defaultValue: z .preprocess((value) => (value ? JSON.stringify(value) : undefined), z.any()) diff --git a/playground/app/routes/employee.tsx b/playground/app/routes/employee.tsx index 0ac136e2..fbd6b052 100644 --- a/playground/app/routes/employee.tsx +++ b/playground/app/routes/employee.tsx @@ -4,7 +4,8 @@ import { useFieldset, useForm, hasError, - reportValidity, + setFormError, + shouldValidate, } from '@conform-to/react'; import { getError } from '@conform-to/zod'; import type { ActionArgs, LoaderArgs } from '@remix-run/node'; @@ -31,15 +32,15 @@ export let action = async ({ request }: ActionArgs) => { const result = await schema .refine( async (employee) => { - if (!submission.scope.includes('email')) { - return true; + if (submission.type !== 'validate' || submission.metadata === 'email') { + return new Promise((resolve) => { + setTimeout(() => { + resolve(employee.email === 'hey@conform.guide'); + }, Math.random() * 500); + }); } - return new Promise((resolve) => { - setTimeout(() => { - resolve(employee.email === 'hey@conform.guide'); - }, Math.random() * 100); - }); + return true; }, { message: 'Email is already used', @@ -50,9 +51,7 @@ export let action = async ({ request }: ActionArgs) => { return { ...submission, - error: submission.error.concat( - !result.success ? getError(result.error, submission.scope) : [], - ), + error: submission.error.concat(getError(result)), }; }; @@ -64,30 +63,33 @@ export default function EmployeeForm() { state, onValidate({ form, submission }) { const result = schema.safeParse(submission.value); - const error = submission.error.concat( - !result.success ? getError(result.error) : [], - ); - if (submission.scope.includes('email') && !hasError(error, 'email')) { - // Skip reporting client validation result - return true; + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); } - return reportValidity(form, { - ...submission, - error, - }); - }, - async onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - if (submission.data !== 'email') { - event.preventDefault(); - } - break; + if (config.mode === 'server-validation') { + if ( + shouldValidate(submission, 'email') && + !hasError(submission.error, 'email') + ) { + throw form; } } + + setFormError(form, submission); }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if ( + submission.type === 'validate' && + submission.metadata !== 'email' + ) { + event.preventDefault(); + } + } + : undefined, }); const { name, email, title } = useFieldset(form.ref, form.config); diff --git a/playground/app/routes/login.tsx b/playground/app/routes/login.tsx index fd109071..0d9a8f93 100644 --- a/playground/app/routes/login.tsx +++ b/playground/app/routes/login.tsx @@ -1,11 +1,10 @@ import { - type FormState, type Submission, conform, useFieldset, useForm, parse, - reportValidity, + setFormError, } from '@conform-to/react'; import type { ActionArgs, LoaderArgs } from '@remix-run/node'; import { Form, useActionData, useLoaderData } from '@remix-run/react'; @@ -17,15 +16,12 @@ interface Login { password: string; } -function validate(submission: Submission): FormState { - if (submission.scope.includes('email') && submission.value.email === '') { +function validate(submission: Submission): Submission { + if (!submission.value.email) { submission.error.push(['email', 'Email is required']); } - if ( - submission.scope.includes('password') && - submission.value.password === '' - ) { + if (!submission.value.password) { submission.error.push(['password', 'Password is required']); } @@ -68,17 +64,17 @@ export default function LoginForm() { ? ({ form, submission }) => { const state = validate(submission); - return reportValidity(form, state); + setFormError(form, state); } : undefined, - onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - event.preventDefault(); - break; - } - } - }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); const { email, password } = useFieldset(form.ref, form.config); diff --git a/playground/app/routes/movie.tsx b/playground/app/routes/movie.tsx index 4520e7be..45cf95cb 100644 --- a/playground/app/routes/movie.tsx +++ b/playground/app/routes/movie.tsx @@ -89,10 +89,7 @@ export default function MovieForm() { onValidate: config.validate ? ({ form, submission }) => { for (const field of form.elements) { - if ( - isFieldElement(field) && - submission.scope.includes(field.name) - ) { + if (isFieldElement(field)) { switch (field.name) { case 'title': if (field.validity.valueMissing) { @@ -131,14 +128,14 @@ export default function MovieForm() { return form.reportValidity(); } : undefined, - onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - event.preventDefault(); - break; - } - } - }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); const { title, description, genre, rating } = useFieldset(form.ref, { ...form.config, diff --git a/playground/app/routes/payment.tsx b/playground/app/routes/payment.tsx index db510987..7a9b1b3d 100644 --- a/playground/app/routes/payment.tsx +++ b/playground/app/routes/payment.tsx @@ -1,4 +1,10 @@ -import { conform, parse, useFieldset, useForm } from '@conform-to/react'; +import { + conform, + parse, + setFormError, + useFieldset, + useForm, +} from '@conform-to/react'; import { getError, getFieldsetConstraint, @@ -13,21 +19,25 @@ import { parseConfig } from '~/config'; const schema = z.object({ iban: z .string() + .min(1, 'IBAN is required') .regex( /^[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?:[ ]?[0-9]{1,2})?$/, 'Please provide a valid IBAN', ), amount: z.object({ - currency: z.enum(['USD', 'EUR', 'GBP']), - value: z.preprocess(ifNonEmptyString(Number), z.number().min(1)), + currency: z.string().min(3, 'Please select a currency'), + value: z.preprocess( + ifNonEmptyString(Number), + z.number({ required_error: 'Value is required' }).min(1), + ), }), timestamp: z.preprocess( ifNonEmptyString((value) => new Date(value)), - z.date(), + z.date({ required_error: 'Timestamp is required' }), ), verified: z.preprocess( ifNonEmptyString((value) => value === 'Yes'), - z.boolean().optional(), + z.boolean().optional().refine(Boolean, 'Please verify'), ), }); @@ -43,7 +53,7 @@ export let action = async ({ request }: ActionArgs) => { if (!result.success) { return { ...submission, - error: getError(result.error, submission.scope), + error: submission.error.concat(getError(result.error)), }; } @@ -51,19 +61,30 @@ export let action = async ({ request }: ActionArgs) => { }; export default function PaymentForm() { - const { validate, ...config } = useLoaderData(); + const config = useLoaderData(); const state = useActionData(); const form = useForm>({ ...config, state, - onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - event.preventDefault(); - break; - } - } - }, + onValidate: config.validate + ? ({ form, submission }) => { + const result = schema.safeParse(submission.value); + + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); + } + + setFormError(form, submission); + } + : undefined, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); const { iban, amount, timestamp, verified } = useFieldset(form.ref, { ...form.config, diff --git a/playground/app/routes/signup.tsx b/playground/app/routes/signup.tsx index 7a1a993e..29b6d921 100644 --- a/playground/app/routes/signup.tsx +++ b/playground/app/routes/signup.tsx @@ -1,10 +1,10 @@ -import type { FormState, Submission } from '@conform-to/react'; +import type { Submission } from '@conform-to/react'; import { conform, parse, useFieldset, useForm, - reportValidity, + setFormError, } from '@conform-to/react'; import type { ActionArgs, LoaderArgs } from '@remix-run/node'; import { Form, useActionData, useLoaderData } from '@remix-run/react'; @@ -17,49 +17,26 @@ interface Signup { confirmPassword: string; } -function validate(submission: Submission): FormState { - const scope = new Set(submission.scope); +function validate(submission: Submission): Submission { const error = [...submission.error]; const { email, password, confirmPassword } = submission.value; - for (const field of scope) { - switch (field) { - case 'email': { - if (typeof email === 'undefined' || email === '') { - error.push([field, 'Email is required']); - } else if (!email.match(/^[^()@\s]+@[\w\d.]+$/)) { - error.push([field, 'Email is invalid']); - } - break; - } - case 'password': { - if (!scope.has('confirmPassword')) { - scope.add('confirmPassword'); - } + if (!email) { + error.push(['email', 'Email is required']); + } else if (!email.match(/^[^()@\s]+@[\w\d.]+$/)) { + error.push(['email', 'Email is invalid']); + } - if (typeof password === 'undefined' || password === '') { - error.push(['password', 'Password is required']); - } else if (`${password}`.length < 8) { - error.push(['password', 'Password is too short']); - } - break; - } - case 'confirmPassword': { - if (!scope.has('password')) { - scope.add('password'); - } + if (!password) { + error.push(['password', 'Password is required']); + } else if (password.length < 8) { + error.push(['password', 'Password is too short']); + } - if (typeof confirmPassword === 'undefined' || confirmPassword === '') { - error.push(['confirmPassword', 'Confirm password is required']); - } else if (confirmPassword !== password) { - error.push([ - 'confirmPassword', - 'The password provided does not match', - ]); - } - break; - } - } + if (!confirmPassword) { + error.push(['confirmPassword', 'Confirm password is required']); + } else if (confirmPassword !== password) { + error.push(['confirmPassword', 'The password provided does not match']); } return { @@ -67,7 +44,6 @@ function validate(submission: Submission): FormState { email, // Never send the password back to the client }, - scope: Array.from(scope), error, }; } @@ -94,19 +70,17 @@ export default function SignupForm() { ? ({ form, submission }) => { const state = validate(submission); - return reportValidity(form, state); + setFormError(form, state); } : undefined, - async onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - if (submission.data !== 'username') { - event.preventDefault(); - } - break; - } - } - }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); const { email, password, confirmPassword } = useFieldset(form.ref, { ...form.config, diff --git a/playground/app/routes/student.tsx b/playground/app/routes/student.tsx index 5e94f587..04d19110 100644 --- a/playground/app/routes/student.tsx +++ b/playground/app/routes/student.tsx @@ -1,10 +1,10 @@ -import type { FormState, Submission } from '@conform-to/react'; +import type { Submission } from '@conform-to/react'; import { conform, useFieldset, useForm, parse, - reportValidity, + setFormError, } from '@conform-to/react'; import { getFieldsetConstraint, getError } from '@conform-to/yup'; import type { ActionArgs, LoaderArgs } from '@remix-run/node'; @@ -27,16 +27,14 @@ const schema = yup.object({ type Schema = yup.InferType; -function validate(submission: Submission): FormState { +function validate(submission: Submission): Submission { try { schema.validateSync(submission.value, { abortEarly: false, }); } catch (error) { if (error instanceof yup.ValidationError) { - submission.error = submission.error.concat( - getError(error, submission.scope), - ); + submission.error = submission.error.concat(getError(error)); } else { submission.error = submission.error.concat([['', 'Validation failed']]); } @@ -66,17 +64,17 @@ export default function StudentForm() { ? ({ form, submission }) => { const state = validate(submission); - return reportValidity(form, state); + setFormError(form, state); } : undefined, - onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - event.preventDefault(); - break; - } - } - }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); const { name, remarks, grade, score } = useFieldset(form.ref, { ...form.config, diff --git a/playground/app/routes/todos.tsx b/playground/app/routes/todos.tsx index e640d3dc..eb40767b 100644 --- a/playground/app/routes/todos.tsx +++ b/playground/app/routes/todos.tsx @@ -5,7 +5,7 @@ import { useFieldset, useForm, parse, - reportValidity, + setFormError, } from '@conform-to/react'; import { getError, getFieldsetConstraint } from '@conform-to/zod'; import type { ActionArgs, LoaderArgs } from '@remix-run/node'; @@ -40,7 +40,7 @@ export let action = async ({ request }: ActionArgs) => { if (!result.success) { return { ...submission, - error: submission.error.concat(getError(result.error, submission.scope)), + error: submission.error.concat(getError(result.error)), }; } @@ -57,20 +57,21 @@ export default function TodosForm() { ? ({ form, submission }) => { const result = schema.safeParse(submission.value); - return reportValidity(form, { - ...submission, - error: !result.success ? getError(result.error) : submission.error, - }); + if (!result.success) { + submission.error = submission.error.concat(getError(result.error)); + } + + setFormError(form, submission); } : undefined, - onSubmit(event, { submission }) { - switch (submission.type) { - case 'validate': { - event.preventDefault(); - break; - } - } - }, + onSubmit: + config.mode === 'server-validation' + ? (event, { submission }) => { + if (submission.type === 'validate') { + event.preventDefault(); + } + } + : undefined, }); return ( diff --git a/tests/conform-dom.spec.ts b/tests/conform-dom.spec.ts index a6cc33c2..97fd372d 100644 --- a/tests/conform-dom.spec.ts +++ b/tests/conform-dom.spec.ts @@ -27,7 +27,6 @@ test.describe('conform-dom', () => { ]), ), ).toEqual({ - scope: ['', 'title', 'description'], value: { title: 'The cat', description: 'Once upon a time...', @@ -44,14 +43,6 @@ test.describe('conform-dom', () => { ]), ), ).toEqual({ - scope: [ - '', - 'account', - 'amount', - 'amount.currency', - 'amount.value', - 'reference', - ], value: { account: 'AB00 1111 2222 3333 4444', amount: { @@ -72,16 +63,6 @@ test.describe('conform-dom', () => { ]), ), ).toEqual({ - scope: [ - '', - 'title', - 'tasks', - 'tasks[0]', - 'tasks[0].content', - 'tasks[0].completed', - 'tasks[1]', - 'tasks[1].content', - ], value: { title: '', tasks: [ @@ -102,7 +83,6 @@ test.describe('conform-dom', () => { ]), ), ).toEqual({ - scope: ['', 'title', 'description'], value: { title: 'The cat', description: 'Once upon a time...', @@ -121,8 +101,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ type: 'test', - data: 'command value', - scope: ['', 'title'], + metadata: 'command value', value: { title: 'Test command', }, @@ -137,8 +116,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ type: 'list', - data: JSON.stringify({ greeting: 'Hello World' }), - scope: ['', 'title'], + metadata: JSON.stringify({ greeting: 'Hello World' }), value: { title: '', }, @@ -158,7 +136,6 @@ test.describe('conform-dom', () => { ]; const result = { type: 'list', - scope: ['tasks'], value: { tasks: [{ content: 'Test some stuffs', completed: 'Yes' }], }, @@ -177,7 +154,11 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ type: 'prepend', scope: 'tasks', payload: {} }), + metadata: JSON.stringify({ + type: 'prepend', + scope: 'tasks', + payload: {}, + }), value: { tasks: [undefined, ...result.value.tasks], }, @@ -198,7 +179,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ + metadata: JSON.stringify({ type: 'prepend', scope: 'tasks', payload: { defaultValue: { content: 'Something' } }, @@ -219,7 +200,11 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ type: 'append', scope: 'tasks', payload: {} }), + metadata: JSON.stringify({ + type: 'append', + scope: 'tasks', + payload: {}, + }), value: { tasks: [...result.value.tasks, undefined], }, @@ -240,7 +225,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ + metadata: JSON.stringify({ type: 'append', scope: 'tasks', payload: { defaultValue: { content: 'Something' } }, @@ -265,7 +250,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ + metadata: JSON.stringify({ type: 'replace', scope: 'tasks', payload: { defaultValue: { content: 'Something' }, index: 0 }, @@ -290,7 +275,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ + metadata: JSON.stringify({ type: 'remove', scope: 'tasks', payload: { index: 0 }, @@ -316,7 +301,7 @@ test.describe('conform-dom', () => { ), ).toEqual({ ...result, - data: JSON.stringify({ + metadata: JSON.stringify({ type: 'reorder', scope: 'tasks', payload: { from: 0, to: 1 }, diff --git a/tests/helpers.ts b/tests/helpers.ts index 62a5072b..2c6d532e 100644 --- a/tests/helpers.ts +++ b/tests/helpers.ts @@ -3,6 +3,7 @@ import type { Page, Locator, Response } from '@playwright/test'; import { expect } from '@playwright/test'; interface FormConfig { + mode?: 'client-only' | 'server-validation'; initialReport?: 'onSubmit' | 'onChange' | 'onBlur'; defaultValue?: any; fallbackNative?: boolean; @@ -17,6 +18,10 @@ export async function gotoForm( ): Promise { const searchParams = new URLSearchParams(); + if (typeof config?.mode !== 'undefined') { + searchParams.set('mode', config.mode); + } + if (typeof config?.initialReport !== 'undefined') { searchParams.set('initialReport', config.initialReport); } diff --git a/tests/react.spec.ts b/tests/react.spec.ts index 392e99cd..ddb63c6c 100644 --- a/tests/react.spec.ts +++ b/tests/react.spec.ts @@ -54,6 +54,7 @@ test.describe('Constraint', () => { expect(constraint).toEqual({ iban: { + minLength: 1, required: true, pattern: '^[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?:[ ]?[0-9]{1,2})?$', }, @@ -126,7 +127,6 @@ test.describe('Client Validation', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: ['', 'title', 'description', 'genre', 'rating'], value: { title: 'The Dark Knight', description: 'When the menace known as the Joker wreaks havoc...', @@ -203,7 +203,6 @@ test.describe('Client Validation', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: ['', 'title', 'description', 'genre', 'rating'], value: { title: 'The Matrix', description: @@ -240,7 +239,6 @@ test.describe('Client Validation', () => { await clickSubmitButton(playground); expect(await getSubmission(playground)).toEqual({ - scope: ['', 'email', 'password', 'confirmPassword'], value: { email: 'me@edmund.dev', }, @@ -248,7 +246,82 @@ test.describe('Client Validation', () => { }); }); - test('Reset', async ({ page }) => { + test('Zod integration', async ({ page }) => { + const form = await gotoForm(page, '/payment'); + const fieldset = getPaymentFieldset(form); + const timestamp = new Date().toISOString(); + + await clickSubmitButton(form); + + expect(await getErrorMessages(form)).toEqual([ + 'IBAN is required', + 'Please select a currency', + 'Value is required', + 'Timestamp is required', + 'Please verify', + ]); + + await fieldset.iban.type('DE89 3704 0044 0532 0130 00'); + + expect(await getErrorMessages(form)).toEqual([ + '', + 'Please select a currency', + 'Value is required', + 'Timestamp is required', + 'Please verify', + ]); + + await fieldset.currency.selectOption('EUR'); + + expect(await getErrorMessages(form)).toEqual([ + '', + '', + 'Value is required', + 'Timestamp is required', + 'Please verify', + ]); + + await fieldset.value.type('1'); + + expect(await getErrorMessages(form)).toEqual([ + '', + '', + '', + 'Timestamp is required', + 'Please verify', + ]); + + await fieldset.timestamp.type(timestamp); + + expect(await getErrorMessages(form)).toEqual([ + '', + '', + '', + '', + 'Please verify', + ]); + + await fieldset.verified.check(); + + expect(await getErrorMessages(form)).toEqual(['', '', '', '', '']); + + await clickSubmitButton(form); + + expect(await getSubmission(form)).toEqual({ + value: { + iban: 'DE89 3704 0044 0532 0130 00', + amount: { + currency: 'EUR', + value: '1', + }, + timestamp, + verified: 'Yes', + }, + error: [], + }); + }); + + test('Form reset', async ({ page }) => { const form = await gotoForm(page, '/movie'); const { title, description, genre, rating } = getMovieFieldset(form); const initialValidationMessages = await Promise.all([ @@ -306,7 +379,6 @@ test.describe('Client Validation', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: ['', 'email', 'password'], value: { email: '', }, @@ -321,7 +393,6 @@ test.describe('Client Validation', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: ['', 'email', 'password'], value: { email: 'invalid email', }, @@ -378,7 +449,9 @@ test.describe('Server Validation', () => { }); test('Async validation', async ({ page }) => { - const form = await gotoForm(page, '/employee'); + const form = await gotoForm(page, '/employee', { + mode: 'server-validation', + }); const { name, email, title } = getEmployeeFieldset(form); await page.route('**', (route) => { @@ -422,7 +495,6 @@ test.describe('Server Validation', () => { body: JSON.stringify({ value: {}, error: [['', 'Request forbidden']], - scope: [''], }), }); }); @@ -472,15 +544,18 @@ test.describe('Server Validation', () => { .poll(() => getErrorMessages(form)) .toEqual(['', '', 'Email is already used', 'Title is required']); - await email.type('e'); + await title.type('Software Developer'); - await expect - .poll(() => getErrorMessages(form)) - .toEqual(['', '', '', 'Title is required']); + expect(await getErrorMessages(form)).toEqual([ + '', + '', + 'Email is already used', + '', + ]); - await title.type('Software Developer'); + await email.type('e'); - expect(await getErrorMessages(form)).toEqual(['', '', '', '']); + await expect.poll(() => getErrorMessages(form)).toEqual(['', '', '', '']); await Promise.all([waitForDataResponse(page), clickSubmitButton(form)]); @@ -649,17 +724,6 @@ test.describe('Field list', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: [ - '', - 'title', - 'tasks', - 'tasks[0]', - 'tasks[0].content', - 'tasks[1]', - 'tasks[1].content', - 'tasks[2]', - 'tasks[2].content', - ], value: { title: 'My schedule', tasks: [ @@ -726,16 +790,6 @@ test.describe('Field list', () => { await clickSubmitButton(form); expect(await getSubmission(form)).toEqual({ - scope: [ - '', - 'title', - 'tasks', - 'tasks[0]', - 'tasks[0].content', - 'tasks[1]', - 'tasks[1].content', - 'tasks[1].completed', - ], value: { title: 'Testing plan', tasks: [ @@ -747,7 +801,7 @@ test.describe('Field list', () => { }); }); - test('Reset', async ({ page }) => { + test('Form reset', async ({ page }) => { const form = await gotoForm(page, '/todos'); const tasks = form.locator('ol > li');