Validation

Form validation patterns using Ant Design Form with inline error messaging.

Inline Validation

import { Form, Input, Button } from '@gtcx/ui';
 
<Form layout="vertical" onFinish={handleSubmit}>
  <Form.Item
    label="Email"
    name="email"
    rules={[
      { required: true, message: 'Email is required' },
      { type: 'email', message: 'Enter a valid email address' },
    ]}
  >
    <Input placeholder="jane@example.com" />
  </Form.Item>
 
  <Form.Item
    label="Password"
    name="password"
    rules={[
      { required: true, message: 'Password is required' },
      { min: 8, message: 'Must be at least 8 characters' },
    ]}
  >
    <Input type="password" />
  </Form.Item>
 
  <Button type="primary" htmlType="submit">Sign In</Button>
</Form>

Validation Patterns

Pattern	When to Use
Required	All mandatory fields
Format	Email, phone, URL, date
Length	Passwords, names, descriptions
Range	Numeric inputs, dates
Custom	Business logic (unique email, valid ID)

Error Message Guidelines

Be specific: "Enter a valid email" not "Invalid input"
Be actionable: Tell the user what to do, not just what's wrong
Show errors inline next to the field, not in a summary
Validate on blur for individual fields, on submit for the form
Use red (error semantic token) for error states

Async Validation

<Form.Item
  label="Username"
  name="username"
  rules={[
    { required: true },
    {
      validator: async (_, value) => {
        const exists = await checkUsername(value);
        if (exists) throw new Error('Username already taken');
      },
    },
  ]}
  hasFeedback
>
  <Input />
</Form.Item>

Inputs Upload