Validation not working on image type in Sanity document
8 replies
Last updated: May 30, 2022
S
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
S
Hi
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.
user M
thanks for responding! below is the ‘illustration’ objectexport default { name: 'illustration', title: 'Illustration', type: 'image', fields: [ { name: 'alt', type: 'string', title: 'Alt', options: { isHighlighted: true, // <-- make this field easily accessible }, }, ], };
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
tileImageor
illustrationfield 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
S
AHHHHHHHHH OMG! thank you ❤️
May 24, 2022, 7:17 PM
N
Hi
user M
I've tried the same solution it works fine however at the beginning I get this errorMay 30, 2022, 3:44 PM
N
any idea how to avoid this
May 30, 2022, 3:44 PM
N
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.