Preventing special characters in phone number field at checkout

[JuttaT]

Hi,

Currently the Shopify checkout gives an error message if letters are used in the phone number field, however it does allow special characters such as ( ) + and so on.

This is problematic in terms of ensuring consistency for processing our orders.

Is there a way to prevent users from adding in special characters?

Thanks!

[Urban_Broccoli]

I also need help with this. It seems to be pretty locked down by Shopify.

Our shipping software no longer accepts (), - or + which means I can no longer bulk print without changing this.

[snelsontt]

Also looking for answers on this, our shipping company cant process the special characters in the address, any word on how to prevent this all together?

[GetAllTool]

Hi, our app enables native checkout validation (King Checkout Validation), which checks each field according to the rules you set yourself and prevents unexpected checkout.

for example:

Prevent Post office (PO) boxes address
Check if the address contains a house number / apartment number
Check if the number of field characters exceeds the maximum value
Customized keywords and regular expression checking rules
etc...
We've just launched our app, so if you're interested, we can offer it to you for free and we look forward to hearing your feedback!

[erik_lindberg_s]

You will need to create an ui-extensions app. I expect you know how to do that.

Use regex to search for the special characters. A solution could look like this for address1 and address2 but could be used for the other objects in useShippingAddress().

import {
  reactExtension,
  Checkbox,
  useShippingAddress,
  Link, useExtensionCapability, useBuyerJourneyIntercept, useApplyAttributeChange, useTranslate,
} from '@shopify/ui-extensions-react/checkout';
import {useState} from "react";

const validationAddress =  reactExtension(
    "purchase.checkout.delivery-address.render-before", () => <App />
);
export {validationAddress};

function App() {

  const address = useShippingAddress();

  const specialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?]+/;

  useBuyerJourneyIntercept(
      ({canBlockProgress}) => {
        return canBlockProgress &&
        address?.address1 &&
        specialChar.test(address.address1) ||
        address?.address2 &&
        specialChar.test(address.address2)
            ? {
              behavior: 'block',
              reason: 'Special characters not supported',
              errors: [
                {
                  // An error without a `target` property is shown at page level
                  message:
                      'Sorry, the address can not contain special characters (!@#$%^& ...)',
                },
              ],
            }
            : {
              behavior: 'allow',
            };
      },
  );

  return null;
}