Formik отправив форму с пустым полем - PullRequest
Новая
       3

Formik отправив форму с пустым полем

0 голосов
/ 17 марта 2020

У меня есть форма ниже с Formik и Yup Validation - 

<Formik
            initialValues={{
                email: '',
                address: '',
                password: ''
            }}
            validationSchema={ Validation }
            onSubmit={values => {
                // same shape as initial values
                console.log(values);
            }}>
        {({ errors, status, touched }) => (
          <Form>
              <FormGroup>
                  <Label for="exampleEmail">Email</Label>
                  <Field name="email" type={'email'} component={customInputForm}/>
              </FormGroup>
              <FormGroup>
                  <Label for="address">Address</Label>
                  <Field name="address" type={'text'} component={customInputForm}/>
              </FormGroup>
              <FormGroup>
                  <Label for="examplePassword">Password</Label>
                  <Field name="password" type={'password'} component={customInputForm}/>
              </FormGroup>
              <Button>Submit</Button>
          </Form>
        )}
        </Formik>

Здесь, когда я нажимаю кнопку «Отправить» с пустой формой поля, отправка без каких-либо ошибок, но когда я касаюсь ввода, он дает ошибку. Не уверен, что я делаю не так, здесь я хочу проверить проверку при нажатии кнопки «Отправить».

Ниже приведено сообщение об ошибке Yup - 

const Validation = Yup.object().shape({
address: Yup.string()
  .min(2, "Too Short!")
  .max(50, "Too Long!")
  .required("Required"),
password: Yup.string()
  .min(2, "Too Short!")
  .max(50, "Too Long!")
  .required("Required"),
email: Yup.string()
  .email("Invalid email")
  .required("Required")
});

 export default Validation;
...