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;