What is the correct way to use toCustom and custom

[hckhanh]

I just wonder which one is the correct way to use them. Should I wrap them in a function to use like stringAsync()

const toPhone = () =>
  toCustom((value: string) => formatIncompletePhoneNumber(value))

const phone = () =>
  custom((value: string) => isValidPhoneNumber(value), 'Invalid phone number')

const phoneAsync = () =>
  stringAsync([minLength(1, 'Enter phone number'), toPhone(), phone()])

const shippingAddressSchema = objectAsync({
  shippingLastName: stringAsync([minLength(1, 'Enter last name')]),
  shippingFirstName: stringAsync([minLength(1, 'Enter first name')]),
  shippingPhone: phoneAsync(),
  shippingAddressLevel4: stringAsync('Must be string'),
  shippingAddressLevel2: stringAsync([minLength(1, 'Enter city')]),
  shippingStreetAddress: stringAsync([minLength(1, 'Enter address')]),
  shippingAddressLevel3: stringAsync([minLength(1, 'Enter state / province')]),
  shippingPostalCode: stringAsync([
    minLength(1, 'Enter postal code'),
    regex(/\d+/, 'Postal code must be numeric'),
  ]),
})

vs

const toPhone = toCustom((value: string) => formatIncompletePhoneNumber(value))

const phone = custom((value: string) => isValidPhoneNumber(value), 'Invalid phone number')

const phoneAsync = stringAsync([minLength(1, 'Enter phone number'), toPhone, phone])

const shippingAddressSchema = objectAsync({
  shippingLastName: stringAsync([minLength(1, 'Enter last name')]),
  shippingFirstName: stringAsync([minLength(1, 'Enter first name')]),
  shippingPhone: phoneAsync,
  shippingAddressLevel4: stringAsync('Must be string'),
  shippingAddressLevel2: stringAsync([minLength(1, 'Enter city')]),
  shippingStreetAddress: stringAsync([minLength(1, 'Enter address')]),
  shippingAddressLevel3: stringAsync([minLength(1, 'Enter state / province')]),
  shippingPostalCode: stringAsync([
    minLength(1, 'Enter postal code'),
    regex(/\d+/, 'Postal code must be numeric'),
  ]),
})

[fabian-hiller]

Both work. It makes no difference. To be consistent as a library, we choose to always use the function format. It is also more flexible, for example if you want to be able to overwrite the default error message.

I would go with this:

// Pipeline functions

const toPhone = () =>
  toCustom((value: string) => formatIncompletePhoneNumber(value));

const phone = () =>
  custom((value: string) => isValidPhoneNumber(value), 'Invalid phone number');

// Valibot schemas

const PhoneSchema = stringAsync([minLength(1, 'Enter phone number'), toPhone(), phone()]);

const ShippingAddressSchema = objectAsync({
  shippingLastName: stringAsync([minLength(1, 'Enter last name')]),
  shippingFirstName: stringAsync([minLength(1, 'Enter first name')]),
  shippingPhone: PhoneSchema,
  shippingAddressLevel4: stringAsync('Must be string'),
  shippingAddressLevel2: stringAsync([minLength(1, 'Enter city')]),
  shippingStreetAddress: stringAsync([minLength(1, 'Enter address')]),
  shippingAddressLevel3: stringAsync([minLength(1, 'Enter state / province')]),
  shippingPostalCode: stringAsync([
    minLength(1, 'Enter postal code'),
    regex(/\d+/, 'Postal code must be numeric'),
  ]),
});

Also, I recommend using the ...Async functions only when needed, and in your case it does not seem necessary since every operation is synchronous. If only a single string requires async validation, just use stringAsync there and objectAsync for all parent schema functions.

[hckhanh]

Thank you for your kind instructions, @fabian-hiller
Maybe I overused the ...Async

So I can use api call for async function. That is great 😍

By the way, Is there any official way to define a custom string([]) like the library?

[fabian-hiller]

By the way, Is there any official way to define a custom string([]) like the library?

Can you explain in more detail what you mean?