Schema Validation

if (title === '') {
	errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
	errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content === '') {
	errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
	errors.fieldErrors.content.push('Content must be at most 10000 characters')
}

function validate(value: string, max: number) {
	const errors = []
	if (value === '') {
		errors.push('Required')
	}
	if (value.length > max) {
		errors.push(`Must be at most ${max} characters`)
	}
	return errors
}

errors.fieldErrors.title.push(...validate(title, titleMaxLength))
errors.fieldErrors.content.push(...validate(content, contentMaxLength))

z.object({
	title: z.string().max(titleMaxLength),
	content: z.string().max(contentMaxLength),
})

const result = schema.safeParse({ title, content })

if (result.success) {
	// we're good, check result.data
} else {
	// we're not good, check result.error
}

z.string().max(5, { message: 'Must be 5 or fewer characters long' })

// even type inference based on the schema:
const A = z.string()
type A = z.infer<typeof A> // string

const name = z.string({
	required_error: 'Name is required',
	invalid_type_error: 'Name must be a string',
})

const user = z.object({
	username: z.string().optional(),
})

const nonEmptyStrings = z.array(z.string()).nonempty({
	message: "Can't be empty!",
})

const FormSchema = z.object({
	email: z.string().email(),
})

<form method="post">
	<label for="email-input">Email</label>
	<input id="email-input" type="email" required />
</form>

<form method="post">
	<label for="email-input">Email</label>
	<input
		id="email-input"
		type="email"
		aria-invalid="true"
		aria-describedby="email-errors"
		required
	/>
	<ul id="email-errors">
		<li>Must be a valid email address</li>
	</ul>
</form>

import { conform, useForm } from '@conform-to/react'
import { getFieldsetConstraint, parse } from '@conform-to/zod'
import { Form } from '@remix-run/react'
import { json, redirect } from '@remix-run/node'
import { z } from 'zod'

const LoginSchema = z.object({
	email: z
		.string({ required_error: 'Email is required' })
		.email('Email is invalid'),
	password: z.string({ required_error: 'Password is required' }),
})

export async function action({ request }: ActionFunctionArgs) {
	const formData = await request.formData()
	const submission = parse(formData, {
		schema: LoginSchema,
	})

	if (submission.intent !== 'submit') {
		// the user hasn't submitted the form yet
		// this will happen if Conform is validating the form before submission
		// (like if we configure Conform to validate onBlur)
		return json({ status: 'idle', submission } as const)
	}

	if (!submission.value) {
		// there's no value because there is an error in the form
		return json({ status: 'error', submission } as const, {
			status: 400,
		})
	}

	const { email, password } = submission.value

	const isAuthenticated = await authenticate({ email, password })
	if (!isAuthenticated) {
		// set the form error:
		submission.error[''] = ['Invalid email or password']
		return json(
			{
				status: 'error',
				submission,
			} as const,
			{
				status: 401,
			},
		)
	}

	return redirect('/dashboard')
}

export default function LoginForm() {
	const actionData = useActionData<typeof action>()
	const [form, fields] = useForm({
		id: 'login-form',
		constraint: getFieldsetConstraint(LoginSchema),
		lastSubmission: actionData?.submission,
		onValidate({ formData }) {
			return parse(formData, { schema: LoginSchema })
		},
	})

	return (
		<Form method="post" {...form.props}>
			<div>
				<label htmlFor={fields.email.id}>Email</label>
				<input {...conform.input(fields.email)} />
				<ErrorList id={fields.email.errorId} errors={fields.email.errors} />
			</div>
			<div>
				<label htmlFor={fields.password.id}>Password</label>
				<input
					{...conform.input(fields.password, {
						type: 'password',
					})}
				/>
				<ErrorList
					id={fields.password.errorId}
					errors={fields.password.errors}
				/>
			</div>
			<ErrorList id={form.errorId} errors={form.errors} />
			<button type="submit">Login</button>
		</Form>
	)
}

function ErrorList({
	id,
	errors,
}: {
	id?: string
	errors?: Array<string> | null
}) {
	if (!errors) return null
	errors = Array.isArray(errors) ? errors : [errors]

	return errors.length ? (
		<ul id={id} className="flex flex-col gap-1">
			{errors.map((error, i) => (
				<li key={i} className="text-foreground-destructive text-[10px]">
					{error}
				</li>
			))}
		</ul>
	) : null
}