Formik submitting a form with empty field

Viewed 1985

I have below form with Formik and 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>

Here when I click on Submit button with empty field form is submitting without any error but when I touch the input then it is giving error. Not sure what I am doing wrong here I want to check validation on Submit Button Click also.

Below is Yup Error Message -

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;
0 Answers
Related