Conditional field validation based on boolean value in Sanity

8 replies
Last updated: Oct 10, 2023
Can I make fields required only if a boolean is set to true? Trying to set all fields to required if the banner is enabled.

defineField({
      title: "Enable cookie banner",
      name: "cookie_banner_enabled",
      type: "boolean",
      group: "cookies"
    }),
    defineField({
      title: "Cookie banner title",
      description: "The title of the cookie banner",
      name: "cookie_banner_title",
      type: "string",
      group: "cookies",
      hidden: ({ document }) => !document?.cookie_banner_enabled
    }),
    defineField({
      title: "Cookie banner button text",
      description: "The text of the cookie banner button if empty defaults to 'Accepteren'",
      name: "cookie_banner_button_text",
      type: "string",
      group: "cookies",
      hidden: ({ document }) => !document?.cookie_banner_enabled
    }),
    defineField({
      title: "Privacy Policy link text",
      description: "The privacy policy link text if empty defaults to 'Privacy Policy'",
      name: "privacy_link_text",
      type: "string",
      group: "cookies",
      hidden: ({ document }) => !document?.cookie_banner_enabled
    }),
    defineField({
      title: "Privacy Policy URL",
      description: "The URL to your privacy policy page.",
      name: "privacy_url",
      type: "reference",
      group: "cookies",
      to: [{ type: "page" }],
      hidden: ({ document }) => !document?.cookie_banner_enabled
    }),
AI Update

Yes, you can absolutely make fields conditionally required based on a boolean value! You'll want to use custom validation with the validation property that checks the document context.

Here's how to modify your schema to make those cookie banner fields required when cookie_banner_enabled is true:

defineField({
  title: "Enable cookie banner",
  name: "cookie_banner_enabled",
  type: "boolean",
  group: "cookies"
}),
defineField({
  title: "Cookie banner title",
  description: "The title of the cookie banner",
  name: "cookie_banner_title",
  type: "string",
  group: "cookies",
  hidden: ({ document }) => !document?.cookie_banner_enabled,
  validation: (rule) => 
    rule.custom((value, context) => {
      if (context.document?.cookie_banner_enabled && !value) {
        return 'This field is required when cookie banner is enabled';
      }
      return true;
    })
}),
defineField({
  title: "Cookie banner button text",
  description: "The text of the cookie banner button if empty defaults to 'Accepteren'",
  name: "cookie_banner_button_text",
  type: "string",
  group: "cookies",
  hidden: ({ document }) => !document?.cookie_banner_enabled,
  validation: (rule) => 
    rule.custom((value, context) => {
      if (context.document?.cookie_banner_enabled && !value) {
        return 'This field is required when cookie banner is enabled';
      }
      return true;
    })
}),
defineField({
  title: "Privacy Policy link text",
  description: "The privacy policy link text if empty defaults to 'Privacy Policy'",
  name: "privacy_link_text",
  type: "string",
  group: "cookies",
  hidden: ({ document }) => !document?.cookie_banner_enabled,
  validation: (rule) => 
    rule.custom((value, context) => {
      if (context.document?.cookie_banner_enabled && !value) {
        return 'This field is required when cookie banner is enabled';
      }
      return true;
    })
}),
defineField({
  title: "Privacy Policy URL",
  description: "The URL to your privacy policy page.",
  name: "privacy_url",
  type: "reference",
  group: "cookies",
  to: [{ type: "page" }],
  hidden: ({ document }) => !document?.cookie_banner_enabled,
  validation: (rule) => 
    rule.custom((value, context) => {
      if (context.document?.cookie_banner_enabled && !value) {
        return 'This field is required when cookie banner is enabled';
      }
      return true;
    })
}),

The key is using custom validation rules with the context parameter. The validation function receives the current field value and a context object that includes context.document, which gives you access to all fields in the document, including your cookie_banner_enabled boolean.

When the banner is enabled and a field is empty, the validation returns an error message. When it's disabled or the field has a value, it returns true to indicate the field is valid. This works perfectly alongside your existing hidden logic, so the fields will only show AND be required when the banner is enabled.

One important note: validation in Sanity is client-side only within the Studio. If you're creating/updating documents via the API, you'll need to implement validation on your backend as well.

Show original thread
8 replies
            validation: (Rule) => Rule.custom((value, context) => {
                if (context.parent.externalLink) {
                    return true
                }

                if (!value) return "This field is required"

                return true
            }),
If sibling externalLink is false, this field is required
On what field should this validation go? Thank you for the help
Write it in the same way as the "hidden" property
defineField({
      title: "Cookie banner title",
      description: "The title of the cookie banner",
      name: "cookie_banner_title",
      type: "string",
      group: "cookies",
      hidden: ({ document }) => !document?.cookie_banner_enabled,
      validation: (Rule) =>
        Rule.custom((value, context) => {
          if (value && context?.document?.cookie_banner_enabled) {
            return true
          }

          if (!value) return "This field is required"

          return true
        })
    }),
Like so?
I think you can remove the first
value &&
?
But yes that looks good
defineField({
      title: "Cookie banner title",
      description: "The title of the cookie banner",
      name: "cookie_banner_title",
      type: "string",
      group: "cookies",
      hidden: ({ document }) => !document?.cookie_banner_enabled,
      validation: (Rule) =>
        Rule.custom((value, context) => {
          if (context?.document?.cookie_banner_enabled && !value) {
            return "Cookie banner title is required"
          }

          return true
        })
    }),
This seems to work when boolean is checked. Thanks!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?