Подтверждение формы реакции-окончательной формы с yup и пользовательскими проверками - PullRequest
0 голосов
/ 08 октября 2019

У меня есть форма, созданная с помощью response-final-form, и функция проверки, которая выглядит следующим образом

export const validate = async (values, schema) => {
  if (typeof schema === 'function')
    schema = schema();

  try {
    await schema.validate(values, { abortEarly: false });
  } catch (e) {
    return e.inner.reduce((errors, error) => {
      return setIn(errors, error.path, error.message);
    }, {});
  }
};

Так что, когда я рендерил свою форму, она выглядит примерно так

<Form
  onSubmit={handleSubmit}
  validate={values => validate(values,schema())}
/>

Схема - это схема Yup, которая определена следующим образом:

const schema = () =>

    yup.object().shape({
        name: yup
            .string()
            .max(255)
            .required(REQUIRED_FIELD),
        number: yup
            .string()
            .required(REQUIRED_FIELD),
        exp_year: yup
            .number()
            .required(REQUIRED_FIELD),
        exp_month: yup
            .number()
            .min(1,'Invalid')
            .max(12,'Invalid')
            .required(REQUIRED_FIELD),
        cvc: yup
            .number()
            .required(REQUIRED_FIELD),

    });

. Это прекрасно работает, пока я использую методы Yup, однако используемая мной служба кредитных карт предоставляет свои собственные функции проверки, такие как 'Provider.validateCardNumber 'из внешнего скрипта.

То, что я не могу понять, это то, где и как добавить пользовательскую проверку, чтобы я мог продолжать использовать проверку Yup для других полей, но мои методы внешней библиотеки для пользовательской проверки cvc и номера кредитной карты,

Есть ли способ добавить пользовательскую функцию обратного вызова в мою схему yup и вернуть значение функции, например my Provider.validateCardNumber, внутри yup, чтобы мне не нужно было изменять мою функцию проверки? и если да, как я могу получить доступ к values в схеме, которые были переданы в функцию проверки ...

ИЛИ

как мне изменить мою функцию проверки, чтобы оназапустите проверку схемы Yup и внешние проверки сценариев, чтобы в конце она вернула пустой объект в команду validate response-final-form

Другими словами, я хочу запустить внешний метод как частьмоей проверки, но продолжайте использовать схему Yup, если это возможно.

1 Ответ

1 голос
/ 09 октября 2019

Ответ лежит в документации Yup и их методе test(), поэтому в конце мне просто нужно было расширить схему и использовать метод теста, чтобы иметь возможность пройти внешний тест true / false

number: yup
            .string()
            .test('Card Test',
                'Invalid Card Number',
                value=>Provider.validateNumber(value)
            )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...