Conform Form Validation Patterns

# Conform Form Validation Patterns for Google Antigravity IDE

Build progressive forms with Conform using Google Antigravity IDE. This guide covers server-first validation, Zod integration, and accessibility patterns.

## Basic Form Setup

```typescript
// src/app/signup/page.tsx
"use client";

import { useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { useFormState } from "react-dom";
import { z } from "zod";
import { signupAction } from "./actions";

const signupSchema = z.object({
  email: z.string().email("Please enter a valid email"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  confirmPassword: z.string(),
  name: z.string().min(2, "Name must be at least 2 characters"),
  terms: z.boolean().refine((val) => val === true, "You must accept the terms"),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"],
});

export default function SignupPage() {
  const [lastResult, action] = useFormState(signupAction, undefined);

  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: signupSchema });
    },
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
  });

  return (
    <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate className="space-y-4">
      <div>
        <label htmlFor={fields.name.id}>Name</label>
        <input
          id={fields.name.id}
          name={fields.name.name}
          defaultValue={fields.name.initialValue}
          aria-invalid={!fields.name.valid}
          aria-describedby={fields.name.errorId}
          className="w-full border rounded px-3 py-2"
        />
        <p id={fields.name.errorId} className="text-red-500 text-sm">{fields.name.errors}</p>
      </div>

      <div>
        <label htmlFor={fields.email.id}>Email</label>
        <input
          id={fields.email.id}
          name={fields.email.name}
          type="email"
          defaultValue={fields.email.initialValue}
          aria-invalid={!fields.email.valid}
          aria-describedby={fields.email.errorId}
          className="w-full border rounded px-3 py-2"
        />
        <p id={fields.email.errorId} className="text-red-500 text-sm">{fields.email.errors}</p>
      </div>

      <div>
        <label htmlFor={fields.password.id}>Password</label>
        <input
          id={fields.password.id}
          name={fields.password.name}
          type="password"
          aria-invalid={!fields.password.valid}
          aria-describedby={fields.password.errorId}
          className="w-full border rounded px-3 py-2"
        />
        <p id={fields.password.errorId} className="text-red-500 text-sm">{fields.password.errors}</p>
      </div>

      <div>
        <label htmlFor={fields.confirmPassword.id}>Confirm Password</label>
        <input
          id={fields.confirmPassword.id}
          name={fields.confirmPassword.name}
          type="password"
          aria-invalid={!fields.confirmPassword.valid}
          aria-describedby={fields.confirmPassword.errorId}
          className="w-full border rounded px-3 py-2"
        />
        <p id={fields.confirmPassword.errorId} className="text-red-500 text-sm">{fields.confirmPassword.errors}</p>
      </div>

      <div>
        <label className="flex items-center gap-2">
          <input type="checkbox" name={fields.terms.name} />
          I accept the terms and conditions
        </label>
        <p id={fields.terms.errorId} className="text-red-500 text-sm">{fields.terms.errors}</p>
      </div>

      <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">
        Sign Up
      </button>
    </form>
  );
}
```

## Server Action

```typescript
// src/app/signup/actions.ts
"use server";

import { parseWithZod } from "@conform-to/zod";
import { redirect } from "next/navigation";
import { z } from "zod";

const signupSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
  confirmPassword: z.string(),
  name: z.string().min(2),
  terms: z.boolean().refine((val) => val === true),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"],
});

export async function signupAction(prevState: unknown, formData: FormData) {
  const submission = parseWithZod(formData, { schema: signupSchema });

  if (submission.status !== "success") {
    return submission.reply();
  }

  const existingUser = await db.user.findUnique({
    where: { email: submission.value.email },
  });

  if (existingUser) {
    return submission.reply({
      fieldErrors: { email: ["This email is already registered"] },
    });
  }

  await db.user.create({
    data: {
      email: submission.value.email,
      name: submission.value.name,
      password: await hashPassword(submission.value.password),
    },
  });

  redirect("/welcome");
}
```

## Best Practices for Google Antigravity IDE

When using Conform with Google Antigravity, validate on both client and server. Use Zod schemas for type safety. Add proper ARIA attributes. Show errors on blur initially. Let Gemini 3 generate form schemas from requirements.

Google Antigravity excels at building accessible forms with Conform.