Schema Validation

antd-typed validates form data on submit using your schema. Validation errors are automatically mapped to the corresponding form fields.

How Validation Works

When the form submits:

All field values are collected
Values are passed through your schema's parse or validate function
If validation passes, onFinish receives the parsed output
If validation fails, errors appear on the relevant fields

import React from "react";
import {  } from "zod";
import {  } from "antd-typed";
import { ,  } from "antd";

const  = .({
  : .().("Please enter a valid email"),
  : ..().(18, "Must be 18 or older"),
});

function () {
  const { ,  } = ({
    : ,
    : () => {
      // Only called if validation passes
      // values.age is number (coerced from string input)
      .();
    },
  });

  return (
    < ="vertical">
      < ="email" ="Email">
        < />
      </>
      < ="age" ="Age">
        < />
      </>
    </>
  );
}

Type Coercion

Schemas can transform values during validation. This is useful when form inputs produce strings but you need numbers or dates.

import {  } from "zod";

const  = .({
  // Input is string "25", output is number 25
  : ..(),

  // Input is string "2024-01-15", output is Date object
  : ..(),

  // Trim whitespace from string inputs
  : .().(),
});

The onFinish callback receives the transformed values, not the raw form input.

Required Field Detection

antd-typed automatically detects required fields from your schema and marks them in the UI. A field is considered required if it fails validation when empty.

import React from "react";
import {  } from "zod";
import {  } from "antd-typed";
import {  } from "antd";

const  = .({
  : .().(1), // Required (min length 1)
  : .().(), // Optional
  : .().().(.("")), // Optional (empty string allowed)
});

function () {
  const { ,  } = ({ :  });

  return (
    < ="vertical">
      {/* Shows required asterisk */}
      < ="name" ="Name">
        < />
      </>

      {/* No asterisk */}
      < ="bio" ="Bio">
        <. />
      </>

      {/* No asterisk */}
      < ="website" ="Website">
        < />
      </>
    </>
  );
}

Error Messages

Error messages come directly from your schema. Place them where you define the validation rule.

import {  } from "zod";

const  = .({
  : 
    .()
    .(8, "Password must be at least 8 characters")
    .(/[A-Z]/, "Password must contain an uppercase letter")
    .(/[0-9]/, "Password must contain a number"),
});

When validation fails, these messages appear below the corresponding form field.

Cross-Field Validation

Use schema refinements to validate relationships between fields.

import {  } from "zod";

const  = 
  .({
    : .().(8),
    : .(),
  })
  .(() => . === ., {
    : "Passwords don't match",
    : ["confirmPassword"], // Error shows on confirmPassword field
  });

Without a Schema

You can use antd-typed without a schema by providing a TypeScript type directly. This gives you type-safe field names but no runtime validation.

import React from "react";
import {  } from "antd-typed";
import {  } from "antd";

type  = {
  : string;
  : string;
};

function () {
  const { ,  } = <>({
    : () => {
      // values is typed as FormValues
      // but no runtime validation occurs
      .();
    },
  });

  return (
    <>
      < ="email">
        < />
      </>
      < ="name">
        < />
      </>
    </>
  );
}

This approach works for simple forms where validation happens server-side or isn't needed.