ДаОшибка проверки появляется только на 1 секунду при переходе к следующему полю - PullRequest
Новая
       13

ДаОшибка проверки появляется только на 1 секунду при переходе к следующему полю

0 голосов
/ 31 мая 2019

Я использую Formik вместе с Yup для своих React Forms.Все работает отлично, за исключением одной маленькой раздражающей вещи с Yup.

Каждый раз, когда я нажимаю на вкладку или не фокусируюсь в поле, я просто вводил правильное значение (электронная почта, имя пользователя, пароль, selectedValues)Я получаю сообщение об ошибке, отображаемое в течение доли секунды.

Вот моя схема Yup: 

  [ActionMode.ADD_USER]: Yup.object().shape({
    username: Yup.string().required('Username is required'),
    email: Yup.string()
      .email('Provide a valid email address')
      .nullable(),
    password: Yup.string().required('Password is required'),
    confirmPassword: Yup.string()
      .required('Password confirmation is required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
    groups: Yup.array()
      .of(Yup.string())
      .required('Group is required')

И вот 2 поля для этой формы: 

<Field
        type="text"
        id="new-username"
        name="username"
        autoComplete="non-username"
        validate={debounceUsernameValidation}
        render={({ field, form: { errors, touched } }) => (
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Username <Asterisk />
            </label>
            <input
              {...field}
              placeholder="Username, (Required)"
              id="username"
              className={classNames('form-control', {
                'is-invalid': errors.username && touched.username
              })}
            />
            <ErrorMessage name={field.name} component={FormErrorMessage} />
          </div>
        )}
      />
      <Field
        type="email"
        id="new-email"
        name="email"
        autoComplete="non-email"
        render={({ field, form: { errors, touched } }) => (
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Email
            </label>
            <input
              {...field}
              placeholder="Email"
              id="email"
              className={classNames('form-control', {
                'is-invalid': errors.email && touched.email
              })}
            />
            <ErrorMessage name={field.name} component={FormErrorMessage} />
          </div>
        )}
      />

Понятия не имею, почему это происходит.Я нигде не вижу, чтобы это происходило из-за моего кода, но я мог что-то упустить.Спасибо за ваше время ..

Я смотрю на примеры по CodeSandBox, и единственное отличие, которое я вижу, это пользователь простого поля ввода вместо поля Formik, которое я пробовал, но не работает.

...