Show only one error message

For my field validation, I have

yup.string()
  .matches(
    /^[A-Z]/,
    {
      message: 'Name must start with a capital letter',
      excludeEmptyString: true,
    },
  )
  .matches(
    /^.[a-zA-Z0-9_]+$/,
    {
      message: 'Alphanumeric characters or underscores only',
      excludeEmptyString: true,
    },
  )
  .required('Name is requried.'),

Sometimes, both errors from the matches(), will show. This makes sense since both errors triggered. However, the way it’s displayed can be a bit messy:

Name must start with a capital letter., Alphanumeric characters or underscores only.

Is there any way to only show one message at a time? Or possibly replace the comma with a period?

[kendallroth]

Thanks @jquense, I think this will work (grabbing first error field and using as error):

let errors = [];

try {
    isValid = invitationSchema.validateSync(row, { abortEarly: false });
} catch (e) {
  const nameError = e.inner.find((ve) => ve.path === 'name')
    ? { name: e.inner.find((ve) => ve.path === 'name').message }
    : null;

  errors.push({
    ...nameError,
  });

  // result: { name: 'First message for name' }
}

[kendallroth]

@jquense Understood. I just double checked and it appears that changing the order of the chained name validation methods will change the order in which the errors appear. For instance, switching to Yup.string().required().min() will display the required message before the min messages, whereas Yup.string().min().required() will display it afterward.

Or is this just a lucky coincidence because the first one just happaned to start before the other? Also, if validateSync is synchronous, do the validations still run in parallel?