Thinkmill / Thinkmill/keystatic

Conditional field validation based on other field values

Open
#1,475 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.4k
Forks
159
Avg merge
21h 41m
Merged PRs (30d)
2

Description

Currently, Keystatic field validation (e.g., validation: { isRequired: true }) is static and cannot depend on the values of other fields in the same schema. This limitation makes it difficult to create logical validation rules for related fields.

Use Case

When working with image fields that include accessibility metadata, we want to require alt text only when an image has been uploaded. Currently, we must choose between:

  1. Making alt text always required (annoying when no image is uploaded)
  2. Making alt text optional (editors might forget to add it)

Example Schema

fields.object({
  image: fields.image({
    label: 'Featured Image',
    directory: 'public/images',
    publicPath: '/images/',
  }),
  alt: fields.text({
    label: 'Alt Text',
    // Would like: isRequired only when image is not null
    validation: { isRequired: false },
  }),
})

Proposed Solution

Add support for conditional validation rules:

fields.object({
  image: fields.image({ /* ... */ }),
  alt: fields.text({
    label: 'Alt Text',
    validation: { 
      isRequired: (values) => values.image !== null 
    },
  }),
})

This would enable validation rules that depend on sibling field values, improving editor UX and data integrity.

Additional Context

Similar functionality exists in form libraries like React Hook Form (conditional validation) and Zod (refinements). This pattern is common in CMS tools where field relationships require contextual validation.


Note: I'm interested in contributing to Keystatic and would be happy to implement this feature if there's interest from the maintainers. Please let me know if this aligns with the project roadmap.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files, tests, or entry points; begin by locating the TypeScript implementation of Keystatic field validation and object-field schema handling. Define and verify sibling-dependent isRequired behavior using the image/alt example, with coverage for both null and non-null image values.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
content
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.