Cross-field Validation

Validate fields against each other using custom validators. This example shows date range validation, attendee limits, and price comparisons where one field depends on another.

Key Features

1
Custom Validator
Access formData in validation to compare with other fields
2
Date Range
End date must be after start date validation
3
Number Comparison
Max attendees must be greater than minimum
4
Price Validation
VIP price must be higher than regular price

Event Booking with Cross-field Validation

Try entering an end date before the start date to see validation in action

CONFIG

const config: WizardConfig = {
  id: 'event-booking',
  title: 'Event Booking',
  steps: [
    {
      id: 'event-details',
      title: 'Event Details',
      fieldGroups: [{
        id: 'date-range',
        fields: [
          {
            id: 'startDate',
            name: 'startDate',
            label: 'Start Date',
            type: 'date',
            required: true,
          },
          {
            id: 'endDate',
            name: 'endDate',
            label: 'End Date',
            type: 'date',
            required: true,
            // Cross-field validation
            validations: [{
              type: 'custom',
              customValidator: (value, formData) => {
                const startDate = formData.startDate;
                if (!startDate || !value) return true;
                return new Date(value) >= new Date(startDate);
              },
              message: 'End date must be after start date',
            }],
          },
        ],
      }],
    },
    // More fields with cross-validation...
  ],
};

PREVIEW

Event Details

Event Name*

Event Type*

Start Date*

End Date*

How It Works

The customValidator function receives two parameters:

value - The current field's value
formData - All form data, allowing access to other fields

Return true if valid, or false to trigger the error message.

Back to Examples Auto-fill onChange