How to disable the "Save" button in a custom document action when there are errors in the input fields.
I understand you want to disable your custom document action button when there are validation errors in the document. Unfortunately, there isn't a straightforward built-in way to check validation status directly from within a document action component in the current version of Sanity Studio.
The challenge here is that document actions don't have direct access to the document's validation state through a dedicated hook or API. The Document Actions API provides access to document properties like draft, published, id, and type, but not validation markers.
Current Limitations
Validation in Sanity Studio operates at the schema/form level, not at the document action level. The validation system is designed to:
- Show real-time feedback in form fields
- Prevent publishing through the built-in Publish action when errors exist
- Display validation markers in the document editor
However, custom document actions don't automatically inherit this validation-aware behavior.
Possible Workarounds
While there's no direct solution, here are some approaches you might consider:
1. Leverage the Built-in Publish Action
The simplest approach is to use Sanity's built-in PublishAction, which already handles validation automatically. If your custom action ultimately publishes the document, consider whether you really need a custom action or if you can extend the default behavior through other means like Initial Value Templates or document lifecycle hooks.
2. Implement Validation Logic Directly
If you need custom validation logic specific to your action, you can implement the validation checks directly within your action's onHandle function:
export function CustomAction(props) {
const {patch, publish} = useDocumentOperation(props.id, props.type)
const [isProcessing, setIsProcessing] = useState(false)
return {
label: 'Custom Save',
disabled: publish.disabled, // Respects the same disabled state as publish
onHandle: () => {
// Perform your custom validation here
const doc = props.draft || props.published
if (!doc?.title || doc.title.length < 10) {
// Show validation error
alert('Title must be at least 10 characters')
return
}
setIsProcessing(true)
// Proceed with your custom logic
patch.execute([/* your patches */])
publish.execute()
props.onComplete()
}
}
}3. Check the disabled State of Publish
You can reference the disabled property from the publish operation returned by useDocumentOperation. While this doesn't give you granular validation details, it respects the same conditions that would disable the built-in publish button:
const {publish} = useDocumentOperation(props.id, props.type)
return {
label: 'My Action',
disabled: publish.disabled,
// ... rest of action
}Important Note About Validation
Remember that validation in Sanity is client-side only within the Studio. If you're performing operations through the API or need server-side validation, you'll need to implement those checks separately.
If this is a critical feature for your workflow, I'd recommend reaching out to the Sanity community Slack or filing a feature request, as access to validation state from document actions would be a valuable addition to the API.
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.