Реакт + Формик + Юп асин c проверка - PullRequest
Новая
       23

Реакт + Формик + Юп асин c проверка

0 голосов
/ 23 апреля 2020

Проверка Formik + yup с помощью .test () срабатывает при изменении каждого поля

пример: у меня есть схема проверки: 

const schemaValidation = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required()
    .test( // it runs even if previous validation failed!
      'checkEmailExists', 'email already taken.',
      // it triggers on every onBlur
      email => { console.log('email registration runs') return Promise.resolve(true)}
    ),
  other: yup.string().required()
     .test(
      'checkOthers', 'error', 
      val => {console.log('other validation runs'); return Promise.resolve(true)}
    )
})

Функция визуализации на моем компоненте реагирования выглядит следующим образом: 

...
render () {
 return(
  <Formik
    validateOnChange={false}
    validateOnBlur={true}
    initialValues={{
      name: '',
      email: '',
      other: ''
    }}
    validationSchema={schemaValidation}
    onSubmit={this.handleSubmit}
  >
    {(props) => (
    <Form>
      <div className="field">
        <Field className="input" type="email" name="email" placeholder="Email" />
        <ErrorMessage name="email" />
      </div>

      <div className="field">
        <Field className="input" type="text" name="name" placeholder="Name"/>
        <ErrorMessage name="name" />
      </div>

      <div className="field">
        <Field className="input" type="text" name="other" placeholder="Other"/>
        <ErrorMessage name="other" />
      </div>

      <button type="submit">Submit</button>
    </Form>
    )}
  </Formik>
 )

, поэтому после каждого изменения каждого поля я получаю сообщения от всех валидаторов .test () в консоли: 

email registration runs
other validation runs

версии: реаги: 16.13.1 формик: 2.1.4 : 0,28,4

1 Ответ

0 голосов
/ 23 апреля 2020

По умолчанию formik проверяется после изменения, размытия и отправки событий. Ваш код отключает проверку после событий изменения с validateOnChange={false}. Чтобы проверять только события отправки, попробуйте установить validateOnBlur на false.

https://jaredpalmer.com/formik/docs/guides/validation#when -док проверки-подтверждения https://jaredpalmer.com/formik/docs/api/formik#validateonblur -булев

...