react-form-validator

React Form Validator

Auto-enforces React Hook Form + Zod validation pattern for ALL forms in Next.js/React applications.

Activation Triggers

This skill activates when:

• Creating form components
• Using <form>, <input>, form elements
• Mentioning "form", "validation", "submit", "input"
• Handling form state or submission
• Creating login, signup, or data entry forms

Required Form Pattern (MANDATORY)

ALL forms MUST use:

• ✅ React Hook Form for form state management
• ✅ Zod for schema validation
• ✅ TypeScript types inferred from Zod schema
• ✅ Error handling with accessible error messages
• ✅ Loading states during submission

Auto-Validation Process

Step 1: Detect Form Without Pattern

When detecting a form being created:

// ❌ WRONG - Uncontrolled form, no validation
function LoginForm() {
  const handleSubmit = (e) => {
    e.preventDefault()
    const email = e.target.email.value  // No validation!
    const password = e.target.password.value
    // Submit...
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button>Login</button>
    </form>
  )
}

Step 2: Identify Missing Requirements

Detect:

• ❌ No React Hook Form
• ❌ No Zod validation
• ❌ No TypeScript types
• ❌ No error display
• ❌ No loading state

Step 3: Auto-Fix to Correct Pattern

After (Correct Pattern):

'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'

// 1. Define Zod schema
const loginSchema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
})

// 2. Infer TypeScript type from schema
type LoginFormData = z.infer<typeof loginSchema>

function LoginForm() {
  // 3. Set up React Hook Form with Zod resolver
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
  })

  // 4. Type-safe submit handler
  const onSubmit = async (data: LoginFormData) => {
    try {
      await loginUser(data)
      // Handle success
    } catch (error) {
      // Handle error
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* Email field */}
      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          Email
        </label>
        <input
          {...register('email')}
          id="email"
          type="email"
          className="mt-1 block w-full rounded-md border-gray-300"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : undefined}
        />
        {errors.email && (
          <p id="email-error" className="mt-1 text-sm text-red-600" role="alert">
            {errors.email.message}
          </p>
        )}
      </div>

      {/* Password field */}
      <div>
        <label htmlFor="password" className="block text-sm font-medium">
          Password
        </label>
        <input
          {...register('password')}
          id="password"
          type="password"
          className="mt-1 block w-full rounded-md border-gray-300"
          aria-invalid={!!errors.password}
          aria-describedby={errors.password ? 'password-error' : undefined}
        />
        {errors.password && (
          <p id="password-error" className="mt-1 text-sm text-red-600" role="alert">
            {errors.password.message}
          </p>
        )}
      </div>

      {/* Submit button with loading state */}
      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
      >
        {isSubmitting ? 'Logging in...' : 'Login'}
      </button>
    </form>
  )
}