Раздельная валидация полей и формы в Formik

Мне нужно что бы при срабатывании событий onBlure и onChange была применена одна схема валидации, при submitting эта схема бы дополнялась еще одной с проверкой типа "Required". Насколько я понял, в библиотеке Formik это достигается с помощью функций validate передаваемых компоненту Field. Дополнительная общая валидация передается как validate-функция в компонент Formik. Идея в том что при переходе с поля на поле не возникало ошибки "Required", а при отправке эту проверку надо сделать.

На сайте formik я беру стандартный пример демонстрирующий валидацию и дописываю туда валидацию всей формы. Настораживает то что такого примера как мой там нет, но я продолжаю)))

 import React from 'react';
 import { Formik, Form, Field } from 'formik';
 const validate = value => {
   let errorMessage;
   if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
     errorMessage = 'Invalid email address';
   }
   return errorMessage;
 };

 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 const validateAsync = value => {
   return sleep(2000).then(() => {
     if (['admin', 'null', 'god'].includes(value)) {
       return 'Nice try';
     }
   });
 };
 const MyForm = () => (
   <Formik
     initialValues={{ email: '', username: '' }}
     onSubmit={values => alert(JSON.stringify(values, null, 2))}
     validate={values => {
         const errors = {};
         if (!values.username) {
             errors.username = 'Required';
         };
         if (!values.email) {
             errors.email= 'Required';
         };
    
         return errors;
}}
   >
     {({ errors, touched }) => (
       <Form>
         <Field validate={validate} name="email" type="email" />
         {errors.email && touched.email ? <div>{errors.email}</div> : null}
         <Field validate={validateAsync} name="username" />
         {errors.username && touched.username ? (
           <div>{errors.username}</div>
         ) : null}
         <button type="submit">Submit</button>
       </Form>
     )}
   </Formik>
 );

Мне казалось что этот код должен работать именно так как я описал выше, однако при срабатывании событий onBlure и onChange срабатывает и валидация на поле и общая валидация. Таким образом у меня несколько вопросов

  1. Возможно ли в Formik разделить валидацию поля и всей формы при отправке?
  2. Если возможно, то что я делаю не так?
  3. Если не возможно сделать c formik, то как это проще сделать? Ситуация то вполне стандартная.

Ответы (0 шт):