) {
const response = await fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(values),
});
const result = (await response.json()) as SubmitResponse;
setMessage('message' in result ? result.message : null);
if ('errors' in result) setErrors(result.errors);
if ('values' in result) setSaved(result.values);
}
if (saved) return {JSON.stringify(saved, null, 2)};
return (
<>
{message && {message}
}
);
}
```
## Route handler
```ts
import { FormEngine } from '@formhaus/core';
import { definition } from '@/form/definition';
import { parseValues } from '@/form/parse-values';
import { serverValidators } from '@/form/validators';
export async function POST(request: Request) {
const values = parseValues(await request.json().catch(() => null));
if (!values) {
return Response.json({ message: 'Expected an object of string, number or boolean values' }, { status: 400 });
}
const engine = new FormEngine(definition, values, { validators: serverValidators });
const errors = engine.validate();
if (Object.keys(errors).length > 0) {
return Response.json({ errors }, { status: 422 });
}
return Response.json({ values: engine.getSubmitValues() });
}
```
## How server re-validation works
* `parseValues` rejects a body that is not an object of string, number, boolean or string array values. The route handler returns `400` with a `message`, and the page shows it above the form.
* The route handler builds a new `FormEngine` from the same definition and the posted values.
* The engine computes the active path from the values. Fields on skipped branches are not validated: a Personal submission is not checked for `company`.
* `validate()` checks every visible field on the active path and returns `{ [fieldKey]: message }`.
* `getSubmitValues()` drops values that are not on the active path, so a client cannot send `company` with the Personal plan.
* When `FormRenderer` receives errors through the `errors` prop, it moves to the first step with an error and shows the messages there.
The `companyAvailable` validator is passed only on the server. The client has no validator with that name, so the rule is skipped in the browser and enforced in the route handler:
```ts
import type { ValidatorFn } from '@formhaus/core';
const takenCompanies = new Set(['acme']);
export const serverValidators: Record = {
companyAvailable: (value) =>
takenCompanies.has(String(value).trim().toLowerCase()) ? 'This company already has a workspace' : null,
};
```
The type guard:
```ts
function isFieldValue(value: unknown): boolean {
if (Array.isArray(value)) return value.every((item) => typeof item === 'string');
return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
}
export function parseValues(body: unknown): Record | null {
if (!body || typeof body !== 'object' || Array.isArray(body)) return null;
return Object.values(body).every(isFieldValue) ? (body as Record) : null;
}
```
`FormEngine` does not coerce types: `"5"` sent for a number field is validated as a string. The route handler does not limit the request body size; set a limit in your proxy or hosting platform.
Choose the Team plan and enter `Acme` as the company to see the server error on the company step.