form-validation_skill

Overview

This skill provides form validation patterns for Remix applications using Zod schemas and the Conform library. It explains schema design, server- and optional client-side validation, Polaris component integration, and handling of nested, dynamic, and refined form rules. The guidance focuses on predictable, type-safe data flows and progressive enhancement.

How this skill works

Define Zod schemas to describe and validate form data and infer TypeScript types. Use Conform helpers (useForm, getInputProps, useFieldList) to wire fields to Remix actions; parseWithZod runs validation on the server and can run asynchronously for DB checks. Polaris inputs are bridged to Conform by syncing their value changes to underlying form controls so validation and accessibility remain intact.

When to use it

• Building Remix forms that require strict type-safe validation and predictable server-first behavior
• Integrating Shopify Polaris UI components while preserving form validation and progressive enhancement
• Handling nested objects, addresses, or other structured data in forms
• Implementing dynamic field lists such as product variants or tag arrays
• Adding async validation that checks uniqueness or cross-field rules on the server

Best practices

• Keep schemas small and composable: extract address, variant, or discount sub-schemas
• Prefer server-first validation with parseWithZod, and enable lightweight client validation for UX
• Return structured submission.reply() errors from actions so useForm can show them
• Use superRefine for cross-field rules and async checks; mark parseWithZod async when needed
• When using Polaris, dispatch native input events after updating component values so Conform picks up changes

Example use cases

• Product creation form with title, description, price, status, tags and server-side validation
• Discount creation form that enforces code format, value constraints, and uniqueness via async validation
• Checkout shipping form with nested billing/shipping addresses and same-as-billing toggle
• Product edit page using Polaris components wired to Conform for inline error display
• Dynamic variants management where users add/remove SKU/price/inventory fieldsets