Validation not working on image type in Sanity document

8 replies
Last updated: May 30, 2022
Has anyone gotten the .required() validation to work on an image type? I didn’t realize until testing it today that no image added is not being flagged…
May 24, 2022, 6:31 PM
It looks like it's working on my end. What does your code look like?
May 24, 2022, 6:36 PM
Hi
user M
thanks for responding! below is the ‘illustration’ object
export default {
  name: 'illustration',
  title: 'Illustration',
  type: 'image',
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alt',
      options: {
        isHighlighted: true, // <-- make this field easily accessible
      },
    },

  ],

};
This is being used in our ‘soloGuidePage’ document for the fields ‘Tile Image’ and ‘Hero Image’. The validation is failing to provide ‘error’ when no image is selected.

export default {
  name: 'soloGuidePage',
  type: 'document',
  title: 'Solo Guide Page',
  icon: RiPagesLine,
  fieldsets: [
    {
      name: 'tile',
      title: 'Listing Tile Fields',
      options: {
        collapsible: true,
        collapsed: false,
      },
    },
    {
      name: 'hero',
      title: 'Hero',
      options: {
        collapsible: true,
        collapsed: false,
      },
    },
    {
      name: 'mainContent',
      title: 'Main Content',
      options: {
        collapsible: true,
        collapsed: false,
      },
    },
  ],
  fields: [
    {
      name: 'tileTitle',
      title: 'Tile Title',
      type: 'string',
      fieldset: 'tile',
      validation: (Rule) => [Rule.required().error('Field is required')],
    },
    {
      name: 'tileImage',
      title: 'Tile Image',
      type: 'illustration',
      fieldset: 'tile',
      validation: (Rule) => [Rule.required().error('Field is required')],
    },
    {
      name: 'tileText',
      title: 'Tile Text',
      type: 'text',
      fieldset: 'tile',
      validation: (Rule) => [Rule.required().error('Field is required')],
    },
    {
      name: 'h1',
      title: 'H1 Text',
      type: 'string',
      fieldset: 'hero',
      validation: (Rule) => [Rule.required().error('H1 Text is required')],
    },
    {
      name: 'heroSubtitle',
      title: 'Hero Subtitle Text',
      type: 'heroBlockPT',
      fieldset: 'hero',
    },
    {
      name: 'heroImage',
      title: 'Hero Image',
      type: 'illustration',
      fieldset: 'hero',
      validation: (Rule) => [Rule.required().error('Field is required')],
    },
    {
      name: 'toc',
      title: 'Table of Contents',
      type: 'array',
      of: [{ type: 'tocLink' }],
      description: 'The order should match the in content appearance.',
      fieldset: 'mainContent',
    },
    {
      name: 'guideBody',
      type: 'guideBodyPT',
      title: 'Guide Content Body',
      fieldset: 'mainContent',
      validation: (Rule) => [Rule.required().error('Field is required')],
    },
  ],
};
May 24, 2022, 7:02 PM
I see now! When you set the basic
Rule.required
, all that it's looking for is any value specified
tileImage
. If you just add something like
alt
, that requirement will be met. You'll need to set up a custom rule on either the
tileImage
or
illustration
field that checks for an asset. Like so:
{
      name: 'tileImage',
      type: 'illustration',
      validation: Rule =>
        Rule.custom(({ asset }) => {
          return asset ? true : 'An image is required';
        }),
    },
May 24, 2022, 7:16 PM
AHHHHHHHHH OMG! thank you ❤️
May 24, 2022, 7:17 PM
Haha, you're welcome!
May 24, 2022, 7:18 PM
Hi
user M
I've tried the same solution it works fine however at the beginning I get this error
May 30, 2022, 3:44 PM
any idea how to avoid this
May 30, 2022, 3:44 PM
and show "An image is required" only, even at the beginning
May 30, 2022, 3:47 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?