Add multi fields validation

[acasazza]

Description

It is possible to validate multi-fields using customFieldMessageError when a single value changes.

Just return an array with objects as you can see in the following example:

<BillingAddressForm
  customFieldMessageError={(props) => {
      const regex = /[a-zA-Z]+/g
      const phoneRegex = /^\d+$/
      const textWithSpace = /^[a-zA-Z0-9\s]{1,20}$/
      console.log('props.value billing', props.value)
      if (
        props.field === 'billing_address_first_name' &&
        !regex.test(props.value)
      ) {
        return 'Validation error - only characters are allowed - this is a custom message'
      }
      if (props.field === 'billing_address_metadata_phone') {
        return props.value === ''
          ? null
          : !phoneRegex.test(props.value)
            ? 'Validation error - only numbers are allowed - this is a custom message'
            : null
      }
      if (
        props.field === 'billing_address_line_1' &&
        !textWithSpace.test(props.value)
      ) {
        return 'Validation error - The address should be 1-20 characters long - this is a custom message'
      }
      if (props.field === 'billing_address_line_1') {
        const country = props.values?.country_code
        if (country === 'IT' && props.value !== 'Via Roma') {
          return 'The address should be Via Roma'
        }
        return null
      }
      if (props.field === 'billing_address_country_code') {
        const address = props.values?.line_1
        if (props.value === 'IT') {
          if (address !== 'Via Roma') {
            return [
              {
                field: 'billing_address_line_1',
                isValid: false,
                message: 'The address should be Via Roma',
                value: address
              }
            ]
          }
        } else {
          return [
            {
              field: 'billing_address_line_1',
              isValid: true,
              value: address
            }
          ]
        }
      }
      return null
    }}
 >

[netlify[bot]]

✅ Deploy Preview for commercelayer-react-components ready!

Name	Link
🔨 Latest commit	39ba089a3639fefb3260e368750536dd3dffeded
🔍 Latest deploy log	https://app.netlify.com/sites/commercelayer-react-components/deploys/66a147b99c2615000843941f
😎 Deploy Preview	https://deploy-preview-551--commercelayer-react-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.