Checkout form mobile number validation using checkout UI extension

Shopify Apps
, ,
1

Hello

I want to add custom validation on my mobile number field in checkout using the checkout UI extension. I have checked the reference document of client-side validation where they provided flow for the custom field “AGE”.

Where they have on change event of that custom fields.

URL:- https://shopify.dev/docs/apps/checkout/validation/client-side-validation?framework=remix&extension=react

Screenshot:- https://prnt.sc/szqF5eC2ZjXz

I need help validating Shopify’s default mobile field. Please suggest a solution.

Thank you!!

2

To do this, you need to create a ui checkout extension. then use the hooks useShippingAddress to get the phone number field and useBuyerJourneyIntercept to block user actions if the phone field is entered incorrectly. The extension can return null. Either way it will work. You also need to add block_progress = true in shopify.extension.toml file.

1 Like