Admin Extension Validation Errors

Extensions
1

I’m creating an admin extension (product target) with a form.

How do I trigger a validation error and prevent the save process when a user clicks the contextual save bar when the form within an extension is in an error state? So that users aren’t able to save the page whilst there is an unresolved error?

Currently whilst a field has an error, the save bar allows the user to save the product, which resets/reloads the admin extension. This is unlike trying to save a product with an error on a core field (e.g. leaving the product title field blank) - where Shopify will show an error message.

2

It depends on how your extension is structured.

Shopify provides the UI components and the APIs to submit your data. But it’s up to you to create the logic to validate the form and not submit until the validation passes.

You can do this by hand, or you can use a React form library to help manage the state of the form.

If you want to keep things basic, you can use simple useState hooks to manage the state of the form, and display errors:

const [formState, setFormState] = useState('ready');
const [errors, setErrors] = useState([]);


// validation error:
setFormState('error')
setErrors([{field: "name", message: "Product name is required"}]);

This is a really naive example, but I’m not sure how complex your form is.

3

Hi Dylan, thanks for your response!

My extension already performs field validation and shows any errors via a simple getErrors function, and I store those messages in local state when the merchant clicks Save.

The problem isn’t the validation itself—it’s that clicking Shopify’s contextual save bar still triggers a full product save and page reload. Any invalid changes (and their error messages) are immediately discarded and the form resets to the last saved data, so the merchant never sees that their save was blocked by validation.

What I I’m looking for is a way to hook into the contextual save bar so that, if errors exist, the Save action is prevented and the bar stays open until the form is valid.