Checkout validation: What is the API reference for validating existing textfields in checkout?

marrep
Shopify Partner
10 0 0

Hi there,

 

we would like to migrate to checkout validation. The docs are pretty straight forward with injecting a new Texfield that is validated. So far so good.

 

https://shopify.dev/docs/apps/checkout/validation/block-checkout-progress?framework=react

 

It is mentioned ...but you can use it as an example to build other customizations for field validation, such as the following: Address, Tax code, Phone number, PO box address, Name...

 

How could I validate and limit the number of characters for let's say the Email form field?

 

Is there any link for making this client-side validation?

Replies 10 (10)

MastersHub
Shopify Partner
214 20 36

Do you have Shopify plus. If you have, you can this.

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
marrep
Shopify Partner
10 0 0

Is it possible to test in a regular dev store? What are the docs?

MastersHub
Shopify Partner
214 20 36

Yes, It is possible. You can use this document. 

 

https://shopify.dev/docs/apps/checkout/validation/create-simple-validation-rules

 

If have any questions let me know so I can clarify, and if not, and you'd like to work together please feel free to message me directly.

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
marrep
Shopify Partner
10 0 0

Hey,

thanks for your response.

I will explain it more in detail... Let's say I would like to limit the amount of characters to 25 for the first name within the checkout.

For this purpose I could presumably use the following target to define an error message

https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-checkout...

Since I cannot address the document object, which hook on the client side provides me with the current input so I can evaluate it? 

Also I couldn't find any graphQL reference for the storefront API https://shopify.dev/docs/api/storefront

Thanks 🙏

 

MastersHub
Shopify Partner
214 20 36

No, you can't find it from Storefront API. There is an example at this link. You can access that data from the input variable.

 

Input: https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql/input
Example: https://shopify.dev/docs/apps/checkout/validation/create-simple-validation-rules

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
marrep
Shopify Partner
10 0 0

Please clarify how to target the checkout input form specifically while user types in his data

marrep
Shopify Partner
10 0 0

 

@MastersHub I found the answer how it should work theoretically.

https://belonginc.dev/members/marc/posts/shopify-checkout-extensions-validation

However, I am not able to grant the required level 2 access via the API-access tab . Also I am confused, since this is dev shop I am testing it ...

 

Bildschirmfoto 2024-02-16 um 13.34.45.png

MastersHub
Shopify Partner
214 20 36

You can do this. There are two ways to do this. The example you gave is an example made with checkout UI. If you don't need Checkout UI, you don't need to do this. As far as I understand, there is not. You focus on the other method. Focus on the example below. 

 

export function run(input)

 

There is enough data in the input here. You can see the details from the link here.

 

https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql/input

 

Cart -> BuyerIdentity -> Customer

 

I hope it does its job.

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
marrep
Shopify Partner
10 0 0

What if some goes through the checkout and is not (yet) a registered customer?

 

But I think you are wrong regarding the checkout UI.

 

Since I indeed would like to check what the user types into the field and whether it has >X characters it should prevent the buyer to continue while checking on that particular target.

 

It remains a secret to me how to gain that access within my dev store as all scopes are the .

CodeThat
Shopify Partner
4 0 0

You can do server side validation and limit the number of characters for the Email field with this new app:
https://apps.shopify.com/address-ninja