I have added a few custom input fields to certain product pages by creating a custom product template (copying product.json) and a custom product section (copying main-product.liquid). For example:
This is working, and I’ve added some custom JavaScript for client-side validation for the custom input fields.
Is it possible to add server-side validation for the custom fields as well? Server-side validation will help ensure data integrity as a fallback in case the client-side validation fails or is circumvented (for example, JS is disabled). I do not want to allow products to be added to the cart if the custom fields are empty or do not have a valid value. Ideally I want to block this on the product page when the user clicks the “Add to cart” button and display an error message.
At a bare minimum, I want to validate a field isn’t empty. Ideally I’d like to validate the value is numeric, or a certain length, or a valid date/time, etc.
Is this possible to implement without using Checkout UI Extensions? I am not a Shopify Plus merchant.
In short no, shopify does not execute arbitrary code you may implement, it’s not like wordpress server etc.
In general: Any “validation” sanitation for form submissions is already handled by shopify.
Beyond that you’d have to implement custom checks in liquid for themes.
Which can be an exercise in futility as you don’t not actually have any control over the form.error properties coming from shopify’s server and liquid is a templating language that does not have things like regex for parsing strings.
If you want to reject orders , without checkout extensions, then you need to do it AFTER the order is placed as a backend process using an app, such as a general automation app like shopify-flow, usemechanic app, or more specific order handling apps on the app store.
About the only workaround do to pseudo validation in the checkout is trying to hack it using the carrier-service api, or setting high prices with discounts that require certain cart.attributes to bring the price down etc.
Or sidestep cart to checkout with draft orders https://tasks.mechanic.dev/create-a-draft-order-from-the-cart