Form is automaticly refresh and reset + reload page after submit form
After clicking on submit button of my form the page reloads and reset all things
<Formik
initialValues = {{
code: ''
}}
validate={ values => {
const errors = {};
if (!values.code)
{
errors.code = 'Empty Field';
};
return errors;
}}
onSubmit={(values, { setSubmitting }) =>
{
dispatch(verifyCode(values.code));
setSubmitting(false);
}}
>
{({
values,
handleChange,
handleBlur,
handleSubmit,
}) => (
<>
<Redirector
activeOn={status.status === 'VERIFIED'}
to='../../../'
/>
<form
autoComplete="off"
>
<FormInput
label='Code We Sent'
type='text'
onChange={handleChange}
onBlur={handleBlur}
value={values.code}
name='code'
/>
<StateButton
showLoaderOn={!status.load}
text='Verify'
display
clicked={handleSubmit}
/>
<Alerts
kind='failure'
display={status.status === "CODE_ERROR" && status.load}
text={"Wrong Code, Please check the code and re-enter"}
/>
</form>
</>
)}
</Formik>
| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.1.2 |
| React |16.12.0 |
| TypeScript | - |
| Browser |Chrome Windows 10 NT |
| npm/Yarn | 1.22.4 |
| Operating System | Windows |
I am facing the same issue. What I had to do to resolve it was, pass the handleSubmit prop to my <Form onSubmit={}> and initiate the event preventDefault().
const onSubmit = async (values, formikProps) => {
console.log("onSubmit -> values, formikProps", values, formikProps);
setTimeout(() => {
console.log("resolved timeout at onSubmit");
}, 5000);
};
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={validation}
onSubmit={onSubmit}>
{({
values,
errors,
touched,
handleSubmit,
handleChange,
handleBlur,
isSubmitting,
}) => (
<Form
// role="form"
onSubmit={(e) => {
e.preventDefault();
handleSubmit();
}}> ... </Form>
)}
</Formik>
Most helpful comment
I am facing the same issue. What I had to do to resolve it was, pass the
handleSubmitprop to my<Form onSubmit={}>and initiate the eventpreventDefault().